2011-10-07 50 views
0

我在所有的Internet Explorer版本中都有一個TABLES問題,或者說TD的高度讓我發瘋。IE中的不同處理表td-height與所有其他處理表?

我有下面的標記

<table> 
    <tbody> 
     <tr style="vertical-align:top;"> 
      <td id="TD1" width="35" colspan="2" style="background-color:yellow; height:1%;"> 
       <div id="DIV1" style="height:10px; background-color:red;"></div> 
      </td> 
      <td id="TD2" width="15" rowspan="2" style="height:99%;"> 
       <div id="DIV2" style="height:160px; background-color:green;"></div> 
      </td> 
     </tr> 
     <tr style="vertical-align:top;"> 
      <td id="TD3" width="25"> 
       <div id="DIV3" style="height:60px; background-color:blue;"></div> 
      </td> 
      <td id="TD4" width="10"> 
       <div id="DIV4" style="height:80px; background-color:orange;"></div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

爲了更好地理解可以從w3schools.com

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_height執行在tryit編輯器的代碼。

我想解釋,我試圖解釋:)

雖然DIV2的高度小於或大於DIV1和DIV3或DIV4的高度,它像預期相同。但是當DIV2的高度大於DIV1和DIV3或DIV4的高度時,IE以TD3和TD4相同的比例上升TD1。

在所有其他瀏覽器中,只有TD3和TD4引發。 TD1的高度仍然與DIV1相同。

有人有想法或解決方法我該如何解決這個問題?

無表格佈局是可悲的選擇。

+0

檢查的第一件事是,IE瀏覽器是不是在Quirks模式。另外,您測試的是哪個版本的IE? – Spudley

+0

沒有一個適當的文檔類型,你永遠不會讓IE試圖像其他更現代的瀏覽器一樣執行。 IE處於怪癖模式。 – Rob

+0

@Spudley IE7(兼容模式),IE8,IE9 – elweilando

回答

0

沒有一個適當的文檔類型,你永遠不會得到IE試圖執行像其他更現代的瀏覽器。 IE處於怪癖模式。使用這一個:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者這一個:

<!DOCTYPE html>

+0

我認爲文檔類型是正確的: \t <!DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http:// www。 w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「> \t \t document.compatMode is CSS1compat – elweilando

+0

@elweilando - 新的網頁沒有用於過渡文檔類型。過渡是爲了從舊的,不贊成使用的標記中「過渡」。始終使用嚴格的文檔類型。 – Rob

+0

我嘗試了兩個聲明,但它什麼也不改變。 Html5以及xhtml strict在這種情況下與過渡相同。 – elweilando