IE6不支持CSS中的min-width/height属性问题的解决方法


这么好的语法,偏偏IE 6不支持,不过说不支持也不准确,事实上IE6本身在指定height与width的值时,就具有min-width和min-height的特性,只是如果单纯用height或width来指定,到了Firefox或IE 7时,又会把它当作是锁死的值,不会因內容增加而扩大元素的box。
解决的方法先看语法。
最小高度的解決

复制代码
代码如下:

.Elm {
min-height:100px;
height: auto !important;
height: 100px;
}

最小宽度的解決

复制代码
代码如下:

.Elm {
min-width:100px;
width: auto !important;
width: 100px;
}

里面的秘诀,是先利用较新的浏览器识别min-width/height,透过它来指定值,而IE6则是透过width/height取值。
不过这里有个冲突,就是新的浏览器也识别width/height,因此min-width/height会被width/height改写,解決的办法,就是中间那一行。
height: auto !important;(以及width: auto !important;)
由于它标示!important,所以下面那行height无法取代上面这一行,见解变成新的浏览器忽视掉第三行,而让高度不受第三行影响。
另外由于IE6不识别 min-height和 !important属性,所以它还是取第三行的语法,这样就可以相安无事,皆大欢喜。

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3