zoukankan      html  css  js  c++  java
  • css最小高度,最大高度important

    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/

  • 相关阅读:
    js-20170816-Date对象
    js-20170804-Math对象
    js-20170619-string对象
    微信web开发者工具
    前端开发指南
    接口调试工具DHC
    CSS预处理器
    Weex
    Vue.js
    hbuilder
  • 原文地址:https://www.cnblogs.com/lijea/p/3121361.html
Copyright © 2011-2022 走看看