Почему IE не учитывает ширину таблицы с дочерним изображением

Question

Рассмотрим следующий код :

HTML:

<table>
    <tr>
       <td><img src="http://watduck.jpg.to" /></td>
    </tr>
</table>

CSS:

table { width: 10% }
img { max-width: 100% }

Очевидно, что изображение должно быть в 10 раз больше ширины окна, что точно соответствует размеру каждого браузера, кроме IE, где оно просто возвращается к своему первоначальному размеру.

Однако рассмотрим это :

HTML:

<div><img src="http://watduck.jpg.to" /></div>

CSS:

div { width: 10% }
img { max-width: 100% }

, который IE получаетсправа, и отображается на десятой части ширины окна.

---

Итак, вот вопрос: что вызывает такое поведение, и что можно сделать, чтобы заставить IE уважатьширина таблицы?

Протестировано в IE8 и IE9 (не заботятся о IE7 и ниже).

Answer 1

Если вы укажете table-layout: fixed; в таблице css, это сработает.

Кажется, что в стандарте есть некоторая противоречивая терминология, касающаяся макетов таблиц. В частности, table-layout: auto; говорит это:

Ширина столбца задается самым широким неразрывным содержимым в ячейках

Поскольку содержимое изображений не разбивается, оно устанавливает ширину ячейки в соответствии с размером содержимого. Максимальная ширина, кажется, переопределена им.