IE8cv puzzler: настройка масштаба:1 через класс скрывает контент

Question

Если выполняются следующие условия, настройка zoom:1 скрывает содержимое элемента:

1. Разметка должна иметь такую ​​структуру:

   <table><tr><td>
       <div class="overflow">
           <span class="zoom">zoom</span>
       </div>
   </td></tr></table>
   

2. Эти стили должны быть определены:

   .somethingSPECIAL .zoom {
       zoom: 1;
   }
   .overflow {
       width: 300px;  /* Whatever px here. */
       height: 150px; /* Whatever px here. */
       overflow: auto;
   }
   

3. somethingSPECIAL Класс должен применяться к любому предку разметки выше после загрузки страницы (как при нажатии кнопки).

4. Браузер, который вы были вынуждены использовать, должен быть IE8 в представлении совместимости.

Вот живая демонстрация.

Почему это происходит, и что я могу сделать, чтобы предотвратить это? (Я не могу избавиться от zoom: 1, Я также должен установить родительский класс, как показано в демоверсии.)

Answer 1

Я заметил, что ширина и высота элемента span варьировались от 33x19 до 0x0. Так что, если вы установите его обратно на "Авто", он работает.

$('.zoom').css('width', 'auto');

Смотрите http://jsfiddle.net/GgY6C/29/