Tại sao không IE chiều rộng bảng đối với con hình ảnh chất lỏng

Question

Cân nhắc the following code:

HTML:

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

CSS:

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

Hình ảnh nên rõ ràng là một 10 chiều rộng của cửa sổ, đó là chính xác những gì nó là trong mọi trình duyệt ngoại trừ IE, nơi nó chỉ đơn giản là rơi trở lại tôi ts kích thước ban đầu.

Tuy nhiên, consider this:

HTML:

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

CSS:

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

mà IE không có được quyền, và hiển thị tại một 10th chiều rộng cửa sổ.

---

Vì vậy, đây là câu hỏi: những gì gây ra hành vi này, và điều gì có thể được thực hiện để buộc IE để tôn trọng chiều rộng của bảng?

Đã kiểm tra trong IE8 & IE9 (không quan tâm đến IE7 trở xuống).

Answer 1

Nếu bạn chỉ định trong bảng css nó hoạt động.

Dường như có một số thuật ngữ mâu thuẫn trong tiêu chuẩn liên quan đến bố cục bảng. Đặc biệt, table-layout: auto; nói điều này:

Chiều rộng cột được thiết lập bởi các nội dung không thể phá vỡ rộng nhất trong các tế bào

Kể từ khi nội dung hình ảnh là không thể phá vỡ, nó đặt chiều rộng của tế bào với kích thước của Nội dung. Chiều rộng tối đa dường như bị quá tải bởi nó.