IE8、HTML5 和组合类 ala .class1.class2{}答案

【问题标题】：IE8, HTML5, and combined classes ala .class1.class2{}IE8、HTML5 和组合类 ala .class1.class2{}
【发布时间】：2011-11-28 08:56:11
【问题描述】：

我正在制作一个响应式网站并定期做这样的事情：

.someclass {}
.someclass.with_context {}

IE8 无法识别第二类。 IE9 可以。

我正在使用 HTML5 文档类型，它使用 IE8 标准模式作为页面默认值。

有什么想法吗？

【问题讨论】：

尝试隔离您的问题 - 尝试制作一个普通的 HTML4 doctype HTML 文件，并使用 CSS 选择器。它在那里工作吗？如果是这样，可能是 HTML5 doctype 和 IE8 不配合。
可能是你的语法错误，IE9被省略了，仔细检查你的代码。
发送现场演示链接，以便我们重现问题。

【解决方案1】：

CSS Tricks 有一篇关于使用多个类/ID 的好文章。根据我的阅读，大多数浏览器都支持它（包括 IE7 - 不是 IE6）。

当然，QuirksMode 也有一篇关于它的快速文章。

如果您使用的是 HTML5，您使用的是Shiv（headjs，或Modernizr，或CSS to recognize the HTML5 elements 的其他方式）？

你能在jsFiddle上举个例子吗？

或者这只是一个错字？

你的 HTML 是这样的吗？

.someclass {}
.someclass.with_context {}
<div class="someclass with_context">Hello World</div>

还是这样的？

.someclass {}
.someclass .with_context {}
<div class="someclass">
<div class="with_content">Hello World</div>
</div>

编辑

您可能需要将 HTML5 元素设置为块级：

header,nav,article,footer,section,aside,figure,figcaption{display:block}

【讨论】：

【解决方案2】：

如果我有几分钟的时间来追踪行为的细节，我会跟进，但这是我整理出来的：

众所周知，IE8确实支持

.myClass.anotherClass {}

很好。

Facebook 曾经要求你使用

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

使用 Like 按钮等。这导致了一些非常奇怪的边缘情况行为，并且切换到他们的“HTML5”/javascript 类似模块使其无关紧要。

最终做到这一点 - 也是有趣的部分 - 是其中一些用途是在媒体查询中，这似乎很重要。当我有更多时间测试和追踪它们时，我会在这里跟进详细信息。

感谢您的建议。

【讨论】：

【解决方案3】：

我假设你的意思是你的 CSS

类似的东西

<article class="someclass">

    <section class="with_context">something here</section>


</article>

注意上面可以使用标准 div 代替 HTML5 标签

无论哪种方式，您的 CSS 都需要在 2 个类之间留出空格

.someclass {SOME CSS}   
.someclass .with_context {SOME CSS}

【讨论】：