? ? ?很多時候，我們會想要設置容器的最小寬度或最大寬度，但IE6不支持min-width、max-width屬性怎么辦？IE7以上雖然支持min-width、max-width，但是容器要設置display才行，如果不需要浮動，IE7又不支持display:inline-block，那又怎么辦？

? ? ?別著急，跟著我慢慢來。

? ? ?注意：下文所說的正常瀏覽器指火狐瀏覽器，因為我只在火狐測試的，其他正常主流瀏覽器效果一樣。

? ? ?首先我們來看看標準情況下min-width、max-width屬性是什么效果。

<div class="box1">【1號】</div><div class="box2">【2號】</div><div class="box3">【3號】 <a href="http://blog.csdn.net/xjun0812?viewmode=list">http://blog.csdn.net/xjun0812?viewmode=list</a><p>歡迎關注我的博客歡迎關注我的博客歡迎關注我的博客歡迎關注我的博客</p></div>

? ? ?1號容器是固定寬度，作為參考；

? ? ?2號容器是為后面設置最小寬度做準備；

? ? ?3號容器是為后面設置最大寬度做準備；

? ? ?為了容易看出效果，我們簡單設置一下樣式：

.box1{width: 400px;height: 45px;background-color: #90d3d1;}.box2{min-width: 400px;height: 45px;background-color: #51ee6c;}.box3{max-width: 400px;height: 45px;background-color: #2788ee;}

? ? ? 正常瀏覽器顯示效果如下：

? ? ? 我們看到3號容器的內容已經溢出，說明最大寬度已實現。2號容器內容少，但是并沒有像我們想象的顯示400px寬度，而是填充了屏幕。哦，原來是block的原因，那我們對容器2設置inline-block在看效果吧。

.box2{display: inline-block;min-width: 400px;height: 45px;background-color: #51ee6c;}

? ? ? 現在正常瀏覽器顯示效果如下：

? ? ? ?我們來看看瀏覽器IE7的效果

? ? ? 很明顯IE7并沒有實現min-width效果，是因為IE6、ie7不兼容display:inline-block。這里解決方法有2種，第一是寫個方法兼容display:inline-block，如果想讓容器浮動可以用此方法；第二是用css hack+ expression。我這里用第二種方法吧，以IE7為例：

.box2{display: inline-block;min-width: 400px;height: 45px;background-color: #51ee6c;*min-width: auto;*width: expression(this.offsetWidth < 400 ? 'auto' : '400px');}

? ? ??

? ? ? 來看瀏覽器IE7現在的效果

? ? ??

? ? ? OK，現在正常瀏覽器和IE7瀏覽器效果都達到了，如果考慮流氓IE6的朋友也是用這個方法，只是hack不一樣而已，我就不在這里贅述了。

? ? ? 那么現在你是不是認為問題都解決了呢？年輕人，不要著急，IE豈是你能輕易解決的。讓我們來看看還有什么問題吧，這次我們用在表格上看看效果是什么樣子，內容和樣式代碼如下：

<table><tr><td class="table1">【1號】表格一</td></tr></table><table><tr><td class="table2">【2號】表格一</td></tr></table><table><tr><td class="table3">【3號】表格一3號表格一3號表格一3號表格一3號表格一</td></tr></table> .table1{width: 200px;}.table2{min-width: 200px;}.table3{max-width: 200px;}
? ? ? 正常瀏覽器顯示效果如下：

? ? ? IE6、IE7瀏覽器顯示效果如下：

? ? ? IE6、IE7下td不支持min-width和max-width屬性。原本我想用上面的css來解決這個問題，結果不行，在網上也找了好多資料，試了還是不行。最后只能用js來解決了，非常簡單，具體代碼如下：

if($(".table2").width()<200){$(".table2").width("200px")}if($(".table3").width()>200){$(".table3").width("200px")}? ? ??

? ? ? 再來看看IE6瀏覽器，IE7也是一樣：

? ? ??

? ? ? 好了，現在常用的情況都解決了，我這里主要是討論的最小寬度。最大寬度和最小高度等等你可以自己試一下。終于可以休息會了，不過我們隨時會遇到兼容性問題，只有經驗多了我們才不會擔心。

? ? ? 最后，時間倉促，資質有限，文中表述僅代表個人觀點，如果有更好的方法，歡迎留言。

總結

以上是生活随笔為你收集整理的min-width、max-width兼容IE6、IE7的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。