IE 7 - Bug on css class inheritance

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

Pregunta

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?

¿Fue útil?

Solución

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

Otros consejos

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top