Question

我研究过Google Docs的CSS样式，我注意到了这样的事情：

.goog-inline-block {
    position        : relative;
    display         : -moz-inline-box;
    display         : inline-block
}

* html .goog-inline-block {
    display         : inline
}

*:first-child + html .goog-inline-block {
    display         : inline
}

html>body .goog-inline-block {
    display         : -moz-inline-box;
    display         : inline-block
}

我理解这个.goog-inline-block类应该是什么意思，但是这段代码对我来说是个问题：

为什么一个简单的类有如此多的声明？
为什么简单.class-name声明与* html .class-name声明不同？
这个狡猾的建筑*:first-child + html .class-name做什么？

Answer 1

这条规则：

* html .goog-inline-block {
    display         : inline
}

为IE6定义了一种样式。在IE6的文档模型中，有一个包含html的神秘根元素，因此这个选择器利用* html hack来利用这个事实。

这条规则：

*:first-child + html .goog-inline-block {
    display         : inline
}

为IE7定义了一种样式。在IE7的文档模型中， html上面没有根元素，但之前还有另一个，这是*:first-child + html选择器的目标

这条规则：

html>body .goog-inline-block { display : -moz-inline-box; display : inline-block }

为IE7 +和其他浏览器定义样式。 IE6不支持子选择器>，因此它永远不会看到此规则。 -moz-inline-box实际上与inline-block相同，但适用于Firefox 2及更早版本，因为这些版本不支持inline-block。

该类有很多声明，因为不同的浏览器存在display: inline-block样式的问题，因此这些浏览器需要黑客和解决方法。

“.class”和“* html .class”和“html＆gt; body .class”之间的区别

1 个答案: