Как добиться согласованного отображения встроенного блока при применении к ячейкам таблицы?

У меня есть простая таблица HTML, которую я хочу последовательно отображать во всех современных браузерах (IE9, последняя версия FF, Chrome, Safari) . Если я применю ширину и «display: inline-block» только к ячейкам таблицы, FireFox 4 и Chrome позволят ячейкам таблицы «обернуться» во вторую строку, как если бы они были обычными элементами встроенного блока. В IE9, однако, ячейки обрабатываются как классические ячейки таблицы, не сохраняют свою ширину и сжимаются в одну строку.

Полный пример кода находится здесь: http://jsbin.com/ujeber/6

Есть ли свойство CSS, которое можно применить к элементам table, tr или td для получения IE9, Chrome и FireFox 4 должны вести себя так же, как друг друга? Если нет, то какой из этих браузеров правильно соответствует стандартам или стандарты в данном случае неоднозначны?

Разметка:

Test1 Test2 Test3 Test4

Стиль:

  td {
    width:300px;
    display:inline-block;
  }

  table {
    width: 650px;  
  }

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

5
задан Nathan Bell 27 June 2011 в 10:16
поделиться