问题

Question

问题

我用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>

请问，我该如何修复这个错误？

Answer 1

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

.backspace.keypressed

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

.keypressed .backspace

Answer 2

IE7支持多类选择器。

我怀疑问题在于您没有在HTML中使用DOCTYPE，因此浏览器渲染会切换到怪异模式，这是您想要避免的。

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

<!DOCTYPE html>

这是HTML5的DOCTYPE，但它并不重要，它可以在IE7中正常工作并触发标准模式而不是怪癖模式。

IE 7 - 关于css类继承的Bug

问题

代码

2 个答案: