Почему Internet Explorer не отображает эту страницу гладко?

Question

Посмотрите на эту страницу в IE 8: http://labs.pieterdedecker.be/hetoog/layout.htm

Сначала все выглядит хорошо, но попробуйте навести курсор мыши на элемент, а затем снова убрать мышь с сетки элементов.

До

* После 1016 *

Обратите внимание, что справа от желтого предмета есть черная рамка. Кроме того, шрифт выглядит по-другому.

Как я могу это исправить?

Answer 1

Я бы положил все свои деньги на то, что это из-за вашей схемы на основе таблицы ... попробуйте вместо этого использовать DIV.

Вот грубый пример замены всех ваших таблиц / ячеек на div:

http://jsbin.com/akido/

протестируйте его в IE8, и вы увидите, что у вас больше нет проблемы с изменением ...

Answer 2

Вы должны попытаться удалить макет таблицы: фиксированное свойство, назначенное table.grid в вашем CSS, я читал где-то, что может вызвать ошибки в IE8. (Должно быть ненужным, так как похоже, что вы присвоили ширину каждому тд.)

Кроме того, вам следует подумать о том, чтобы в будущем использовать больше делений на несколько классов. Вместо того, чтобы попробовать, вы можете написать CSS как td.note {} вместо td.brownnote, td.greennote, ... {}