CSS hack

作者: 尚有 | 来源:发表于2018-01-12 11:04 被阅读17次

    CSS hack是为了根据不同浏览器或者同一浏览器的兼容或者某些特性引起的页面展示效果不达人愿而使用的一种技术
    大致分为三类:
    1、选择器前缀法: 例如 IE6能识别div .div{},IE7能识别+div .div{}或者*:first-child+div .div{}。
    2、属性前缀法:IE6能识别""和" * ",IE7能识别" * ",但不能识别"",IE6~IE10都认识"\9",但firefo对前述三个都不认识
    3、IE条件注释法:,针对IE6及以下版本: 。这类Hack既可以调节样式,也可以执行内部的判断语句。

    选择器前缀法

    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\9{...}只对IE6/7生效
    @media \0screen {body { background: red; }}只对IE8有效
    @media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效
    @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

    属性前缀法

    编号 hack 例子 适用浏览器
    1 * *color IE6 及以下版本 IE7
    2 + +color IE6 及以下版本 IE7
    3 _ _color IE6 及以下版本
    4 - -color IE6 及以下版本
    5 # #color IE6-IE10
    6 \0 color:#000\0; IE8和IE10
    7 \9\0 color:#000\9\0; IE9和IE10
    8 \9 color:#000\9; IE6 - IE10

    IE条件注释法

    主要是针对ie浏览器的,通过判断IE浏览器的版本从而给定样式或者判断条件


    img.png

    相关文章

      网友评论

        本文标题:CSS hack

        本文链接:https://www.haomeiwen.com/subject/mkuxoxtx.html