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

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

HTML:

CSS:

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

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

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

HTML:

CSS:

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

, который IE делает правильно и отображает 10-ю часть ширины окна.

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

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