DIV+CSS相容解決DIV最大寬度和最小寬度問題

在製作網頁中，我們經常會碰到min/max-width,min/max-height在IE6底下是無效的，這也是web設計師最頭疼的問題之一，以下的方法可以解決這些難題，並且比較簡約。當然，如果你還有更好的方法，希望能在首頁留言給我：
<div
style="max-width:250px;">這段文字內容,ax /min 在ie7 +
和firfox,safari,opera瀏覽器下均支援，最寬值為250px</div>不過IE6無法認讀這個屬性，還好IE它支援自己javascript的屬性工作表達,例如：
div{width:expression_r(250+"px")} 和 div{widt:250px}在IE
的認讀中都是一致的！但如果有的使用者在瀏覽器中禁用javascript，這個寫法就失敗了。所以，需要換一種方法：
#mycss {
width:100%;
max-width:500px;
width:expression_r(document.body.clientWidth > 500? "500px": "auto" ); }

或是：
#mycss {
max-width: 33em;
width: expression_r(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
}  

  我們設定了容器mycss的寬度為：width:100%;　其實這是一句廢話，因為DIV是塊元素，預設的寬度就是父級元素的寬度。此例中div寬度，若不進行聲明則等同於body的寬度。
我們設定容器的max-width為500px。這對於FF來說是有效。而對於IE則沒有作用。
　　面對沒有效果的IE，我們應用expression_r嵌入指令碼，聲明了當寬度大於500px的時候，寬度就等於500px。

parseInt(document.body.currentStyle.fontSize)?"33em":"auto" 如果這個實際寬度大於 (500/12）當前字型的尺寸，則設定頁面的寬度為 33em。

同樣，對於最小的寬度，和ax/min-hight，也是一樣的：
最小：
#mycss {
min-width: 333px;
width:
expression_r( document.body.clientWidth < 334 ? "333px" : "auto"
);
}

最大高度：

#mycss {
max-height:
333px;

height: expression_r( this.scrollHeight > 332 ? "333px" : "auto" )
}
最小高度：

#mycss {

min-height: 333px;

height: expression_r( this.scrollHeight < 334 ? "333px" : "auto" );
}

另外還有一種簡單的方法：

#a {height:auto
!important; min-height:400px;}
這個樣式可以在IE5.5，IE6，IE7以及FF，Safari等瀏覽器下的解決最小高度問題，最大高度就沒有實踐過了，呵呵。

分享到： QQ空間 新浪微博 人人網 開心網 更多