• Css hack总结和解决方法


    一、CSS HACK最佳应用方式

       在开发页面的过程中,总会遇到这样那样的不兼容问题,在尽量避免使用一些兼容性很差的元素和样式后,往往还有细节上的不兼容问题,追求完美的前端工程师们就要采用css hack来解决问题了。

      网上各种css hack资料很多,但是很多是有错误,或者不形象的,今天我来细致形象的总结一下他们,及最万无一失的用法~

      所有效果均经过各个浏览器测试  

      首先 ,将要提及的css hack 有:_,*,\0,\9,\0\9,!important

      各个hack的作用:

          

    1、_ :用于IE6 

    1 background-color:blue;
    2 _background-color:red;

            效果:

             

          

    2、*和+:用于IE6,IE7

    1 background-color:blue;
    2 *background-color:red; 

        

    1 background-color:blue;
    2 +background-color:red;

      

          效果都为:

        

    3、\0:用于IE8,IE9

    1 background-color:blue;
    2 background-color:red\0;

            效果:

          

            没错,在IE6下 无法识别了~~~

     

    4、\9:用于 IE6,IE7,IE8,IE9

    1 background-color:blue;
    2 background-color:red\9;

            效果:

        

          

    5、\9\0:用于IE9

    1 background-color:blue;
    2 background-color:red\9\0;

            效果: 

        

            

          没错IE6,又无法识别了~~~~

     

    6、!important:用于所有浏览器--不能算做是hack了,不推荐使用哦

    1 div{
    2 background-color:red !important;
    3 }
    4 #test{
    5 background-color:blue;
    6 }

            效果:

        

            加上!important 可以完全无视css优先级了~~~

     

    二、什么是Haslayout?

        顾名思义,它的意思就是 --- has layout,是IE下的特有属性,通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。

    hasLayout是一种只读属性,有两种状态 true/false,当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。

    什么时候表明Haslayout =  false?
        IE浏览器下的很多bug都是haslayout = false 引起的,所以出现下列问题,就很可能是haslayout跑出来捣鬼了。
          1.文字消失,截断
          2.边框消失
          3.3像素偏差
          4.绝对元素定位错误
          5.滤镜不生效
          6.滚动页面跳动
          7其他(欢迎补充哦~)

    haslayout = true?

      haslayout是一种只读属性,不能人为设置,那该肿么办呢?

    首先,IE下 有一些元素是默认带着 haslayout属性的:
       <table>

       <td>

       <body>

       <img>

       <hr>

       <input>

       <select>

       <textarea>

       <button>

       <iframe>

       <embed>

       <object>

       <applet>

       <marquee>

    其他的就只能通过设置css 属性来触发haslayout = true,注意哦,haslayout = true一旦触发是不可逆转的~

    触发的css 目前总结有:(欢迎补充哦)
    1.position:absolute
    2.float:left/right
    3.display:inline-block
    4.width,height:除“auto”外的任意值
    5.zoom:除"normal"外 ...

     

     

  • 相关阅读:
    转:Caused by: java.lang.NoSuchMethodError: org.apache.log4j.Category.log
    maven安装
    eclipse安装插件
    java.lang.ClassNotFoundException: com.*.listener.ConfigInfoReader
    oracle
    myeclipse中文乱码,JSP页面乱码
    ansible 列表变量、字典变量
    python模块
    python函数
    python数据类型2
  • 原文地址:https://www.cnblogs.com/couxiaozi1983/p/2417004.html
Copyright © 2020-2023  润新知