• hack是什么


      不同浏览器对css的解析是不同是,因此需要css hack来解决浏览器局部的兼容性问题。针对不同浏览器写不同的CSS代码的过程叫CSS  Hack。

      常见的hack有三种形式,分别是CSS属性hack,CSS选择符hack,IE条件注释hack,hack主要针对IE浏览器。

    CSS属性hack:如IE6能识别"_"和"*",IE7能识别"*",不能识别"_",firefox两个都不能识别。

    color:red;//所有浏览器识别

    _color:red;//IE6识别

    *color:red;//IE6、IE7识别

    +color:red;//IE6、IE7识别

    *+color:red;//IE6、IE7识别

    [color:red;//IE6、IE7识别

    color:red9;//IE6、IE7、IE8、IE9识别

    color:red;//IE8、IE9识别

    color:red9;//IE9识别

    color:red ;//IE9识别

    color:red!important;IE6不识别!important

    CSS选择符hack:IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。

    *html #demo{color:red;} //IE6识别

    *+html #demo{color:red;} //IE7识别

    body:nth-of-type(1) #demo{color:red}  //IE9、FF3.5+、Chrome、Safari、Opera识别

    head:first-child+body #demo{color:red}  //IE7+、FF、Chrome、Sarari、Opera识别

    :root #demo{color:red9} //仅IE9识别

    IE条件注释hack:IE条件注释从IE5开始提供的一种非标准逻辑语句只在IE有有效,其他浏览器被当做注释。

    <!--[if IE]>IE可见<![endif]-->

    <!--[if IE 6]>IE6可见<![endif]-->

    <!--[if IE 7]>IE7可见<![endif]-->

    <!--[if !IE 7]>IE不可见<![endif]-->

    <!--[if gt IE 6]>IE6以上版本可见<![endif]-->

    <!--[if gte IE 6]>IE6和IE6以上版本可见<![endif]-->

    <!--[if lt IE 7]>IE7以下版本可见<![endif]-->

    <!--[if lte IE 7]>IE7和IE7以下版本可见<![endif]-->

    <!--[if !IE]>IE不可见<![endif]-->

    由于IE6不支持!improtant,ff支持!important,所以用来区分浏览器。

    <style type="text/css">

    .demo{

    color:red !important;

    color:green;

    }

    </style>

    <div class="demo">abc</div>

    在ie6中字体为绿色,在FF中字体为红色。

    注意:在一个选择器里面,!important改变优先级,IE6下是无效的,后面的样式覆盖前面的样式。在有多个选择器的时候,!important有效的。

    <style type="texe/css">

    .demo{

    color:red !important;

    }

    .demo{

    color:green;

    }

    </style>

    <div class="demo">abc</div>

    在多选择符的时候也要注意IE6的显示情况:

    #name.a1.a2 {color:red};

    .a1.a2 {color:red};

    在IE7+和FF/OPERA/SAFARI都支持,在IE6上则被理解为:

    #name.a2 {color:red};

    .a2 {color:red};

    前面的类名会被后面的类名覆盖掉。可考虑不用类组合的形式。

    本学习内容来源于  前端客 的分享:http://www.qdker.com/archives/138.html

  • 相关阅读:
    农历查询
    C#颜色转换函数
    在IIS部署Silverlight网站
    silverlight双击事件处理
    关于List.Sort想到的
    sql获取总列数
    NHibernate的no persister for
    如何快速构建React组件库
    如何用canvas拍出 jDer's工作照
    Picker 组件的设计与实现
  • 原文地址:https://www.cnblogs.com/lionisnotkitty/p/6006697.html
Copyright © 2020-2023  润新知