zoukankan      html  css  js  c++  java
  • 关于CSS Hack

            由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,导致生成的不是我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,在不同的浏览器中也能得到我们想要的页面效果。

            简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

            啥?还木明白?就是说同一个效果你要根据不同的浏览器写不同的css 代码!现在主要就是针对IE浏览器了。

            原理:使用CSS属性的优先级来实现CSS Hack。

            CSS Hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。

            CSS Hack的实现方式:

    1、CSS 类内部Hack

            通过 属性和值的前缀或后缀来实现浏览器版本的识别。

            例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"9",但firefox前述三个都不能认识。

    2、选择器Hack

            在 浏览器前加前缀来实现不同的浏览器版本的识别。

        * : 识别IE6

        *+ 前缀: 识别IE7

            ex:

            *div{

            

             }

    3、HTML头部引用Hack(掌握)

     原理:使用 IE的条件注释来完成浏览器版本的判断(注:IE10+已经不再支持条件注释)。

    语法:

    <!--[if 条件 IE 版本]>

    满足浏览器版本时要执行的操作

    <![endif]-->

    版本:6-10,如果省略版本号的话,则判断是否为IE

    <!--[if IE 6]>

    只在IE6中要执行的操作

    <![endif]-->

    条件:

    1、gt

    判断当前浏览器版本是否大于指定版本

    2、gte

    判断当前浏览器版本是否大于等于指定版本

    3、lt

    判断当前浏览器版本是否小于指定版本

    4、lte

    判断当前浏览器版本是否小于等于指定版本

    5、!

    非,取反,不是

    判断当前浏览器版本是否不等于指定版本

    6、不写

    判断浏览器是否为IE或IE的指定版本

    CSS hack利弊

            一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。相信只要大家一起努力,少用、慎用hack,未来一定会促使浏览器厂商的标准越来越趋于统一,顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack,必将减轻我们编码的复杂度,少做无用功。

  • 相关阅读:
    H 指数 II(leetcode)
    找两个和为目标值且不重叠的子数组(leetcode)
    冗余链接
    那就别担心了 (30分) PTA
    排座位(newcoder)
    倒水(newcoder)
    文献随笔目录03
    基于ASP.NET的高校教学质量监控系统研究随笔
    基于ASP.NET技术的马铃薯专家系统的构建随笔
    高校贫困生评定管理系统设计随笔
  • 原文地址:https://www.cnblogs.com/gaoxinwu/p/7291969.html
Copyright © 2011-2022 走看看