csshack

noooooob      2022-02-08     593

关键词:

什么是css hack

  由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox,Safari,Opera,Chrome等),对Css的支持,解析不一样,导致

在不同浏览器的环境中呈现出不一致的页面展现效果。这时,为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的css样式。

我们把这个针对不同的浏览器/不同版本写相应的css代码的过程,叫做css hack。

 

css hack的分类

  CSS Hack大致有3种表现形式,CSS属性前缀法,选择器前缀法,以及IE条件注射法(即HTML头部引用if IE)Hack,实际项目中CSS Hack

大部分是针对IE浏览器不同版本之间的表现差异而引入的。

  (1)属性前缀法(即类内部Hack):例如IE6能识别下划线“_”和星号"*",IE7能识别星号"*",但不能识别下划线"_",IE6~IE10都认识

"9",但是firefox前述三个都不认识。

      1.属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。

      2.在标准模式中

        -1."_"下划线IE6识别

        -2."*"星号IE7识别

        -3."9" IE6~IE10都识别

        -4.“” IE8~IE10都识别

        -5.“9”只对IE9/IE10识别

  (2)选择器前缀法(即选择器Hack):例如IE6能识别*html.class{},IE7能识别* + html.class{}或者*.first-child + html.class{}

      1.选择器前缀法是针对一些页面表现闭一只或者需要特殊对待的浏览器,在css选择器前加上一些只有在某些特定浏览器才能识别

      的前缀进行hack,并不常用。

      2.目前常见的是:

        -a.*html*前缀只对IE6生效

        -b.*+html*+前缀只对IE7生效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        *html .one{
            /*解决IE6三像素问题*/
            margin-right: -3px;
        }
        .one{
            float: left;
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /*解决IE6三像素问题*/
            _margin-right: -3px;
        }
        .two{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">i am div1</div>
    <div class="two">i am div2</div>
</body>
</html>

 

  (3)IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释):

<!--[if IE]>IE浏览器显示的内容<![endif]-->,针对IE6即以下版本:<!--[if lt IE 6]>只在IE6显示的内容<![endif]-->。这类Hack不仅对

CSS生效,对写在判断与距里面的所有代码都会生效。

      1.只在IE下生效:

            <!--[if IE]>

            这段文字只在IE浏览器显示

            <![endif]-->

      2.只在IE6下生效:

            <!--[if IE 6]>

            这段文字只在IE6浏览器显示

            <![endif]-->

      3.只在IE6以上版本生效:

            <!--[if gte IE 6]>

            这段文字只在IE6及以上版本IE浏览器显示

            <![endif]-->

      4.只在IE8不生效

            <!--[if !IE 8]>

            这段文字在非IE8浏览器显示

            <![endif]-->

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--[if IE]>
    hello
    <![endif]-->
</body>
</html>

 

csshack

   CSShack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。CSShack的目的就是使你的CSS代码兼容不同的浏览器。  csshack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差的处理.简单的说cs... 查看详情

csshack

 CSShack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。  CSShack分类CSSHack大致有3种表现形式,CSS... 查看详情

csshack

CSSHack:不同厂家的浏览器或者相同厂家不同版本的浏览器对于css的解析是不完全相同的,这样就导致了浏览器的页面生成的效果会不一样。CSSHack的作用就是使得css在不同的浏览器中兼容,让不同的浏览器生成我们想要的效果的... 查看详情

csshack

[*+><]兼容IE6/7_兼容IE69兼容IE6/7/8 查看详情

csshack

什么是CSShack由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSScode就称为CSShack。常用的CSShack有三种方式,CSS内部hack、选择器hack、HTML头部引用,其中第... 查看详情

csshack

什么是csshack?有些人不知道csshack是什么..........但是我想任何一个前端开发一定是遇到过的。我们现在有5大浏览器内核1.Trident 主要代表是IE浏览器                 ... 查看详情

csshack

1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300... 查看详情

csshack

之前一直很狭隘的对CSShack持有偏见,觉得写得规范的代码不应该使用这些“邪门歪道”,可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSShack轻松解决了,不得不服啊,对付神奇的IE就得使用... 查看详情

csshack

之前一直很狭隘的对CSShack持有偏见,觉得写得规范的代码不应该使用这些“邪门歪道”,可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSShack轻松解决了,不得不服啊,对付神奇的IE就得使用这些... 查看详情

常用的csshack

一、什么是CSSHack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程,就叫CSSHack。CSSHack常见的... 查看详情

csshack大全

 1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{wid... 查看详情

csshack技术

首先我们要了解一个概念CSShack不同浏览器,比如IE6、IE7、IE8,MozillaFirefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样。这个时候我们就需要针对不同的浏览器去定义不同的CSS,让它能够同时兼... 查看详情

e11csshack

E11   识别 查看详情

什么是csshack?

1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300... 查看详情

csshack

1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300... 查看详情

经常使用的csshack技术集锦

来源:http://www.ido321.com/938.html一、什么是CSSHack?不同的浏览器对CSS的解析结果是不同的,因此会导致同样的CSS输出的页面效果不同,这就须要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过... 查看详情

csshack

转自CSDNfreshlover的博客专栏《史上最全CSSHack方式一览》什么是CSShack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面... 查看详情

csshack

CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},... 查看详情