Bug: IE7 table auto/100% height

Bug: IE7 table auto/100% height

IE(7)-BUG 使用 table 時會出現運算錯誤.

[html]<table border="0" cellspacing="0" cellpadding="0" height="80%">
<tbody>
<tr bgcolor="red" height="20"><td>&nbsp;</td></tr>
<tr bgcolor="green" ><td>&nbsp;</td></tr>
<tr bgcolor="blue" height="20"><td>&nbsp;</td></tr>
</tbody>
</table>[/html]

一個使用簡單的 table 來製作的 auto height 背景, 我們希望 “Green”底色是可以 auto fill 滿所有空間的,

這在 IE6, IE8, 及其他 browser 皆沒有問題. 而你會發現 “Red” 永遠貼了最大的空間

而當我們嘗試

[html]<tr bgcolor="green" height="100%"><td>&nbsp;</td></tr>[/html]

你會發現, table 的整體高度反而被加高了…..(即並不是原本的 “80%” 高.)

這是因為, IE7 的 100% height 是直接自 td/tr -> table 身上取得的值, 而且互相影響..

並不是一般的 td->tr->table 的層疊關係…又是某個腦殘Programmer.

白痴兼低智商的 IE7 並不能理解甚麼是 height = 80% – 20px – 20px.

如果於版面中必須以 height:auto 的方式顯示. 可以考慮 退回前一個版本的 DOCTYPE

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">[/html]

可是因為這樣而引起的其他顯示錯誤則無能為力…IE6 的顯示更白痴…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料