IE6 实现min-height min-width max-height max-width

Author : luckyGirl

min-height min-width max-height max-width在IE6下是不支持的,实现这些声明效果是很有必要滴,毕竟当内容少时,不希望布局因此受到影响,网上查了一下,如何使用CSS实现IE6的以上属性,总结如下:

主要有3种办法:
方法1,2主要是运用了ie6在当容器的内容大于容器的大小时自动增加容器的大小的BUG,当然1,2,3都能实现min-height 和 min-width,要实现max-height跟max-width只能靠方法3了
 
方法1. 使用!important
.withMinWidth{
    min-width:100px;
    width: auto !important;
    width: 100px;
}
这里有点要说明,IE6并不是不支持!important,而是对它的支持也有一定的bug,我的理解是不能重复体现 !important 这个在CSS中权重最大的效果,只有的样式可以覆盖!important 的属性
相关测试可参考: http://www.wkeke.cn/archives/ie6-and-important/
方法2. 使用IE6的hack
.withMinWidth{
    min-width:100px;
    width: 100px;
}
另外,关于IE的hack如下:
IE6:
_selector{property:value;}
selector{property:value;property:value!important;} //IE6 对 !important的支持有差异
IE7:
+selector{property:value;}
IE8:
selector{property:value\0;}
IE6 & IE7:
*selector{property:value;}
IE6 & IE7 & IE8:
selector{property:value\9;}
方法3. 使用CSS表达式
.max_width{
    max-width: 600px;
    _width:expression_r((documentElement.clientWidth >600) ? “600px” : “auto” );
}
 
浏览器兼容还是需要不断积累,路漫漫呀!!

转载自:Cicy的Blog

standard

Have your say