【问题标题】：IE 7 - Bug on css class inheritanceIE 7 - CSS 类继承的错误
【发布时间】：2013-12-12 19:26:45
【问题描述】：

问题

我使用 2 种键盘（字母数字、数字）创建了键盘，但是当我测试我的脚本时，在 IE 7 中似乎存在 CSS 继承错误。我使用类 .backspace 来隔离这两种类型的键但他们仍然从.backspace继承背景位置

代码

CSS代码

key

.keyboard-table.numeric .key-element{background-position: 5px -90px}
.keyboard-table.numeric .key-element.keypressed{background-position: 5px -210px}

.keyboard-table.numeric .backspace{ background-position: -295px -90px}
.keyboard-table.numeric .backspace.keypressed{background-position: -295px -210px;}

HTML 代码

<div class="keyboard-column">
  <span class="key-element" ascii-code="48" style="margin: 5px 0px 0px 5px; width: 300px; height: 112.5px;">
    0
  </span>
</div>
<div class="keyboard-column">
  <span class="key-element backspace" style="margin: 5px 0px 0px 5px; width: 640px; height: 112.5px;">
    ← Apagar
  </span>
</div>

请问，我该如何解决这个错误？

【问题讨论】：

标签： css internet-explorer inheritance internet-explorer-7 background-position

【解决方案1】：

我认为 IE7 不支持并排同级选择器。所以这些都行不通...

.backspace.keypressed

您可能希望将 .keypressed 添加到键盘列，然后使用..

.keypressed .backspace

【讨论】：

【解决方案2】：

IE7 支持多类选择器。

我怀疑问题在于您没有在 HTML 中使用 DOCTYPE，因此浏览器呈现切换到怪癖模式，这是您希望避免的。

您只需将其添加为 HTML 的第一行：

<!DOCTYPE html>

这是 HTML5 的 DOCTYPE，但没关系，它在 IE7 中可以正常工作，并触发标准模式而不是 quirks 模式。

【讨论】：