Chrome 50 Thay đổi trong hành vi chiều cao tế bào bảng tiềm ẩn

Question

Xem jsFiddle.

<table> 
    <tr> 
    <td> 
     <div> 
     Hello World 
     </div> 
    </td> 
    </tr> 
</table> 

html, body { 
    height:100%; 
    background-color:steelblue; 
    margin:0; 
} 

table { 
    height:100%; 
    border:1px; 
} 

td { 
    border:1px; 
} 

tr { 
    background-color: green; 
} 

div { 
    background-color:salmon; 
    height:100%; 
} 

Trước Chrome 50, bảng có chiều cao 100% cũng ngầm áp dụng chiều cao 100% cho ô bảng.

Đây là một longstanding bug trong các phiên bản Firefox và IE < 11. Chrome và Safari luôn vượt qua chiều cao phần trăm tiềm ẩn trên các ô.

Hành vi đúng theo thông số kỹ thuật là gì? Điều này đã được giới thiệu bởi thiết kế?

Edit: Chromium Bug Report

Answer 1

này dường như là cùng một câu hỏi như this Chromium vấn đề, trong đó đã đóng cửa hơn 2 tháng trước. Theo nhận xét ở đó, hành vi mới trong Chrome 50 là "tương thích hơn".

Vì vậy, để trả lời câu hỏi của bạn, có vẻ như này là có chủ ý và được coi là (ít nhất bởi các nhà phát triển Chromium) là hành vi đúng theo thông số kỹ thuật.

Giải pháp, một cách tự nhiên, là chỉ thiết lập rõ ràng chiều cao của ô là 100%.

Answer 2

Câu trả lời trên hoạt động (để explicity thiết lập các tế bào chiều cao đến 100%) Nếu bạn muốn tất cả các tế bào đi theo rằng mô hình, bạn chỉ có thể sử dụng

<style> 
    td{ 
    height:100%; 
    } 
</style> 

Ngoài ra, bạn có thể thử:

<style> 
    td{ 
    height:inherit; 
    } 
</style> 

Tôi tin rằng một trong hai sẽ hoạt động.