[转帖]Discuz! X1.5中CSS HACK的小细节，可大大方便工作

森森

Discuz!从x1.5开始，CSS制作者不用对浏览器的CSS兼容，而选择什么样样式而烦恼了！
今天向大家介绍一个新的样式修改方法。让你轻松的兼容现在IE的流行版本的方法。

首先贴出一段common.css中的一个注释说明文

----------------------------------

关于 CSS Hack 的说明：

所有 IE浏览器适用： .ie_all .foo { ... }
IE6 专用：    .ie6 .foo { ... }
IE7 专用：    .ie7 .foo { ... }
IE8 专用：    .ie8 .foo { ... }

---------------------------------- */
看到上面的CSS样式，我举例来说明一下这个HACK的使用方法。

比如我在 common.css或module.css中创建了一个对应按钮的样式 ： .mybtns{}

这个按钮的样式，由于太复杂，在各个浏览器中的高度和行高是不同的。

如

.mybtns{
height:25px; //所有浏览器中显示的高度25
height:24px \9; //所有ie浏览器中高度为24
_height:26px; //IE6下面高度为26
*height:24px; // IE7高度下面为24
}

呵呵，看到这里大家是不是有点迷糊。。
现在要结合x1.5的特殊书写方法，完成上面的标注。

.mybtns{
height:25px;
}
.ie_all .mybtns{ height:24px;}
.ie_6 .mybtns{ height:26px;}
.ie_7 .mybtns{ height24px;}

这样一来一目了然了。
可是到这里大家应该有一个疑问：为什么我输入ie_6就是对应IE6浏览器的呢。

原因是：当X1.5在用户浏览器中加载的时候，JS会自动匹配当前的浏览器，在页面中加入一个全局的CSS标签：.ie_all 或 .ie_8
其下所有存在样式，均可以生效。 这样就可以很好的规避因为css的特殊写法，造成的理解上偏差。