• CSS Hacks 总结


    CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,我们就需要针对不同的浏览器去写不同的CSS,让他能在不同的浏览器中也能得到我们想要的页面效果。

    CSS hack 表现形式:

    1.CSS类内部Hack。

    2.选择器Hack。

    3.HTML头部引用(if IE)Hack。

     

    HTML头部引用写法:

    <!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

    <!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->

    <!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->

    <!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->

    <!--[if gt IE 9]><!--> 

    <html class="no-js"> <!--<![endif]-->

    这段代码包含了一些条件注释,它会根据浏览器的不同选择性地给<html>标记添加(或不添加)一个包含浏览器版本信息的class属性。

    透过条件式类别名称的技巧,你的 CSS 内容就可以写成以下这样,也可以有效避免使用 CSS Hacks:

    .lt-ie10 .arrow{

        filter: FlipV;

      }

     

    CSS内部HACK

    1.*:IE7及以下都能识别* ; 标准浏览器(如FF)不能识别*;

    2.!Important:IE7和标准浏览器能识别*,IE6不能识别!important;

    3.*+html:IE7 认 !important, 也认 *+html,且只有IE7认*+html。

    优先度: (*+html + !important) > !important > +html;

    4.下划线_;下划线的只有IE6认识 也只有IE6会处理这部分样式.

    5.反斜杠:color:#0000FF9; /*ie都识别*/

     

    选择器HACK

    1.IE6和早期的版本不支持“子选择器”(>)

    2.IE7增加了对子选择器的支持,但人当一个空的注释紧跟在子选择器的后面时无效。

    子选择器加注释(>/**/);

    html >/**/ body p { color: blue; } 

    IE7以上版本及非IE浏览器颜色为blueIE7为黑色。

     

    盒模型HACK

    IE9以及以下,padding值是加到width内部,盒子整体宽度不变。

    解决方法:html头部加上<!doctype html>,表示统一采取W3C盒模型。

     

  • 相关阅读:
    ES6基础知识
    浏览器相关的前端知识
    JavaScript基础知识汇总
    HTML(超文本标记语言)基础知识汇总
    CSS相关基础知识汇总
    NYOJ 737 石子合并(一)
    HDU 1051 Wooden Sticks
    NY 325 zb的生日
    HDU 2068 RPG的错排
    HDU 1284 钱币兑换问题
  • 原文地址:https://www.cnblogs.com/dengyy/p/3878161.html
Copyright © 2020-2023  润新知