IE 7 - Bug on css class inheritance

StackOverflow https://stackoverflow.com/questions/20552418

문제

The Problem

I created the keyboard with 2 kinds of keyboards (alphanumeric, numeric) but when I test my script there appears to be an inheritance bug with CSS in IE 7. I used the class .backspace to segregate the two types of keys but they still inherit the background-position from .backspace

Code

Css code

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 Code

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

Please, how can i fix this bug?

도움이 되었습니까?

해결책

I don't think IE7 supports side-by-side sibling selectors. So these won't work...

.backspace.keypressed

You may want to add .keypressed to the keyboard-column instead and then use..

.keypressed .backspace

다른 팁

IE7 supports the multiple class selector.

I suspect the problem is that you are not using a DOCTYPE in your HTML, so browser rendering is switched to quirks mode, which is something you would like to avoid.

You should simply add this as the first line of your HTML:

<!DOCTYPE html>

This is the DOCTYPE for HTML5, but it does not really matter, it will work fine in IE7 and trigger standards mode instead of quirks mode.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top