設置DIV最大高度不工作

我有這個簡單的HTML設置DIV最大高度不工作

<html> 
<head> 
    <style> 
    </style> 
</head> 
<body> 
<div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface"> 
    <div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div> 
    <div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div> 
</div> 
</body> 
</html>

基本上有兩種div S：一個「水平」（高2像素）和一個「垂直」（高度爲2px）。

當我認爲在Firefox的網頁：

enter image description here

，而在IE（8）事情發生weired：

enter image description here

頂部DIV不2px的高。

任何想法爲什麼是這樣？

來源

2012-11-11 Majid Laissi

這裏是一個快速[的jsfiddle]（http://jsfiddle.net/pqps5/1 /）。 IE9很好。 – kapa

@bažmegakapa我試圖設置一個jsfiddle我的自我，即使在IE 8中也沒問題，那就是爲什麼我必須製作打印屏幕。你可以請嘗試將我的代碼放在.html文件中，並查看你的IE瀏覽器是否有這樣的行爲？（不使用jsfiddle）。 –

IE7也是如此......也許你只需要添加'display：block' – JFK

你可能的解決方案：

1）。將display: block加入你的風格

2）。檢查你有一個合適的DOCTYPE否則（IE）怪癖模式會產生意想不到的格式和結果。 Check this article for reference

來源

2012-11-12 00:04:07 JFK

我懷疑這將是IE在怪異模式中添加一些「有用的」設置，將容器的高度推到最小文本高度。嘗試爲IE8和更低版本設置line-height: 2px;（條件註釋，也許？），並應該對其進行排序。

來源

2012-11-11 23:54:45

是的，但它不能解釋爲什麼我能夠看到在jsfiddle而不是我的純HTML中，@Tyzoid解決方案適用於我所有的代碼 –

IE7,8和9在這裏工作正常。

你並不真的需要max-height，但是設置display: block和/或line-height: 2px反而可能是一個解決方案。

來源

2012-11-11 23:55:58 Behrens

是的，但它並不能解釋爲什麼我能夠在jsfiddle中看到，但在我的純HTML中看不到，@Tyzoid解決方案適用於我所有的代碼 –

你的問題似乎源於ie的quirks mode模式。

發生在沒有文檔類型聲明時。除了別的以外，最大高度（包括盒子模型）的行爲就好像它是ie5一樣。一個簡單的解決方案是添加一個doctype聲明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

來源

2012-11-11 23:58:37 Tyzoid

謝謝你，那就做到了！ –

@jidma：好，我告訴過你了 – JFK

在我的情況有一個

最小高度

設置重寫其他設置

來源

2017-10-18 11:08:31

設置DIV最大高度不工作

回答

相關問題