在IE7和IE8中使用多级选择器

我知道IE7 & IE8应该支持使用多个CSS类选择器，但我似乎无法让它工作。在IE7和IE8中使用多级选择器

CSS：

.column { 
    float: left; 
    display: block; 
    margin-right: 20px; 
    width: 60px; 
} 
.two.column { 
    width: 140px; 
} 
.three.column { 
    width: 220px; 
} 
.four.column { 
    width: 300px; 
}

HTML：

<div class='two column'>Two Columns</div> 
<div class='three column'>Three Columns</div> 
<div class='four column'>Four Columns</div>

它最终总是使用.four.column规则。关于我在做什么的任何想法都是错误的？

来源

2009-11-04 Erol

你想确定和使用文档类型，所以你不会在怪癖模式下呈现。例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test Page</title> 
<style type="text/css"> 
.column { 
    float: left; 
    display: block; 
    margin-right: 20px; 
    width: 60px; 
    border: 1px solid; 
} 
.two.column { 
    width: 140px; 
} 
.three.column { 
    width: 220px; 
} 
.four.column { 
    width: 300px; 
} 
</style> 
</head> 
<body> 
<div class="two column">Two Columns</div> 
<div class="three column">Three Columns</div> 
<div class="four column">Four Columns</div> 
</body> 
</html>

来源

2009-11-04 01:42:30

废话，那对我来说真的很粗心。谢谢您的帮助！ – Erol 2009-11-04 01:57:33

谢谢你，谢谢。 – 2010-01-22 18:55:52

你救了我的命！ – Fabien 2010-07-19 17:43:26

不是说你一定做错了什么，但如果你只是有这样的类：

.column { 
    float: left; 
    display: block; 
    margin-right: 20px; 
    width: 60px; 
} 
.two { 
    width: 140px; 
} 
.three { 
    width: 220px; 
} 
.four { 
    width: 300px; 
}

，那么你仍然应该得到你想要的渲染，当你以正确的顺序应用这些类：

<div class='column two'>Two Columns</div>

如果您认为css类与编程类相似，.two类会扩展基类.column，超过其width属性。

这样，你也可以申请你的.two，.three和.four类其他网页元素，你要修复这些尺寸的宽度，而不必在他们的页面上的位置或容器的依赖。

来源

2009-11-04 01:28:00

在IE7和IE8中使用多级选择器

回答

相关问题