zoukankan      html  css  js  c++  java
  • 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盒模型。

     

  • 相关阅读:
    Global.asax 事件备忘
    JavaScript异常捕捉
    还记得 virtual 吗?我们来温故知新下吧。
    开发(ASP.NET程序)把写代码写至最有面向对象味道
    MVC中实现 "加载更多..."
    js和C#中的编码和解码(备忘)
    System.AccessViolationException: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
    10种提高WordPress访问速度的方法
    使用Python3实现Telnet功能
    读书计划(不断更新)201904
  • 原文地址:https://www.cnblogs.com/dengyy/p/3878161.html
Copyright © 2011-2022 走看看