CSS Hack

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

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

条件注释:

说明:

只适用于IE浏览器 项目开发使用条件注释

[if lte IE 6] :  IE6以下(包含)版本IE浏览器显示
[if lt IE 6] :  IE6以下版本IE浏览器显示
[if gt IE 6]  : IE6以上版本IE浏览器显示
[if gte IE 6] : IE6以上(包括)版本IE浏览器显示
[if IE ] : 判断IE浏览器  只在IE浏览器显示
[if IE 8 ] : 只在IE8浏览器显示
[if ! IE 8 ] :非IE8浏览器显示
[if !IE ] : 只在非IE浏览器显示

条件注释的关键字: gt(大于) gte(>=) lt(小于) lte (<=)

使用方式:直接在head标签中使用

<!--[if lt IE 9]>
        <style>
            h1{
                color:red;
                font-size:50px;
            }
        </style>
        
    <![endif]-->
<!--[if lte IE 6]>
    <script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.min.js"></script>
    <![endif]-->

类内属性前缀法:

说明:

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

前缀的特殊符号:

* + _ \0 \9 \0\9 # -

h1{
    *color:red;
}

注意:在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack

选择器前缀法

说明:

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

*h1{
    color:red;
}
posted @ 2022-03-13 15:00  秋弦  阅读(29)  评论(0编辑  收藏  举报