首页 > 代码库 > CSS hack

CSS hack

2024-07-15 23:18:36   226人阅读

CSS hack主要有三种方式：①IE条件注释；②选择符前缀；③样式属性前缀。由于IE浏览器在CSS解析上存在很多问题（可以百度，一堆的CSS bug），所以一般来说CSS hack都是针对IE浏览器来说的

1、IE条件注释（微软官方推荐的hack方式）。针对不同的IE版本，引入对应的CSS文件。注意，这里引入的是一个文件，因此很容易理解这种方法会极大的增加开发和维护的成本（想象一下，IE没更新一个版本，就要重写css代码。。。），所以经常使用的是后两种hack方式。但由于这是官方推荐的，这里还是会仔细的讲述一下

基本用法如下：

1 <!--[if IE]>2 <link type="text/css" href="http://www.mamicode.com/ie.css" ref="stylesheet" />   //这里不仅使用link标签，同样可以使用style、script等标签3 <![endif]-->

扩展用法：

①指定IE版本：只在IE8下生效

<!--[if IE 8]><link type="text/css" href="http://www.mamicode.com/ie.css" ref="stylesheet" />   <![endif]-->

②针对某个版本以内的范围：使用关键字lt(小于)、lte(小于等于)、gt(大于)、gte(大于等于)、！(不等于)，如下代码表示ie.css文件只在IE8及以上本生效

<!--[if gte IE 8]><link type="text/css" href="http://www.mamicode.com/ie.css" ref="stylesheet" /> <![endif]-->

 

2、选择符前缀：在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只能被特定的浏览器识别

*html  .test{  // ....}    only for ie6*+html .test{ // ....}    only for IE7@media screen and (min-width:0\0){             .test{ //....}    only for IE9  IE10    }@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){             .test{ //....}    for  IE10+}

注意：选择符前缀不能用于内联样式。

【Note】何为内联样式？

<span class="test" style="color:red;text-algin:center;">Hello World</span>

代码中style="color:red;text-algin:center;"定义的样式即为内联样式

 

3、样式属性前缀

.test{    style:value;    style:value\9;         //for all IE    style:value\0/;          //for IE8-9     style/*\**/: val\9;    //for IE7-8     *style:value;         //for IE6-7     #style:value;         //for IE6-7    +style:value;         //only for IE7    _style:value;         //only for IE6}

样式属性选择符可以用于内联样式。

 


联系
我们