css最小高度,最大高度important

时间:2022-11-02 20:48:04

min-height用于设置或检索对象的最小高度,为CSSer不可缺少和重要的一个属性。对于Firefox、safari、opera、 Chrome及一些以Trident为内核的山寨浏览器有非常好的支持性,但比较操蛋为它只适应IE6+,对此我们开始抓狂,纠结,暴疯。对此为满足更多 IE6用户也能正常显示,自已总结了三个不同方法页面例子,都可实现兼容的hack处理。

min-height兼容案例一

  1.     min-height:160px; 设置对象box的最小高度,Firefox、IE7+适用;
  2.     height:expression.. 设置CSS属性和JS表达式关联,IE5+支持expression
复制代码



预览: http://byzuo.cn/demo/minHeight/demo_01.html

min-height兼容案例二

  1.     min-height:160px; 设置对象box的最小高度,Firefox、IE7+适用;
  2.     height:auto!important; 设置对象box的高度无自动定位,使用!important对下height高度定位设置进行优先级提升;
  3.     heigt:160px; 设置对象高度,因上属性!important运用,此属性只有IE6认。
复制代码



预览: http://byzuo.cn/demo/minHeight/demo_02.html

min-height兼容案例三

  1.     min-height:160px; 设置对象box的最小高度,Firefox、IE7+适用;
  2.     height:auto; 设置对象box的高度无自动定;
  3.     _heigt:160px; 设置对象高度,此属性只有IE6认,在IE6下此属性覆盖上auto属性。
复制代码



预览: http://byzuo.cn/demo/minHeight/demo_03.html

虽然在IE5+在CSS可支持expression,但因为expression对浏览器资源要求比较高,一般不建议使用expression,所以综合起来案例二、案例三为推荐使用。

但当对于图片宽高自适应的特性,用以上方法没办法实现的情况下,不得以我还是会选择expression。下为非得以而为之expression的例子。

预览: http://www.byzuo.cn/demo/auto_width_height/