表格錯誤在IE瀏覽器（7）

下面是一個簡單的HTML與表格佈局的代碼。在FF中，它看起來應該是這樣的，它在IE7中看起來不像。我究竟做錯了什麼？

我該如何解決它？表格錯誤在IE瀏覽器（7）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <TITLE>test</TITLE> 
    </head> 
    <body> 
     <table id="MainTable" cellspacing="0" cellpadding="0" border="1"> 
     <tbody> 
      <tr> 
       <td colspan="4"> 
        <div style='width:769; height:192;'>192 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" valign="top"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
       <td rowspan="2" valign="top"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
       <td rowspan="2" valign="top"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top" rowspan="2"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
       <td valign="top" rowspan="2"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td valign="top" > 
        <div style='width:190; height:100;'>100 
        </div> 
       </td>       
      </tr> 
      <tr> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

來源

2008-10-13 Mafti

如果您使用嚴格的文檔類型，它看起來有什麼不同嗎？ – Neall 2008-10-13 11:16:11

除了這些其他評論之外，創建一個最小測試用例（例如減少行數）會很好，a）您可以更準確地識別問題b）所以上面發佈的示例代碼的大小可以減小 – 2008-10-13 11:35:33

我假設你抱怨中間行的最小高度（只包含跨越行的單元的高度）和相鄰行的放大高度進行補償，在div之間留下間隙。

當行只包含行跨單元時，IE無法計算最佳行高。通常的解決方案，當你絕對不能調整它來擺脫行跨時，通常的解決方案是在表的一側添加一個1px「虛擬」列，其中包含空單元格，每個單元格的「高度」設置爲行應該有多高。

但是，根據你打算做什麼，CSS佈局可能更合適。如果它像這個例子那樣是一個固定像素的東西，那麼每個div的絕對定位將會非常容易。其他位：CSS寬度/高度值需要單位（可能是'px'）; VALIGN/CELLSPACING /等。即使您使用表格佈局，也可以更容易地在樣式表中完成;一個標準模式的DOCTYPE可能會阻止一些更糟糕的IE錯誤（儘管不是這個舊的，與非CSS相關的錯誤）。

來源

2008-10-13 11:42:16 bobince

完全一致，你可以看看藍圖CSS或者一些幫助

來源

2008-10-13 11:22:48 roundcrisis

一開始其他的CSS框架，你的CSS值應該有單位，例如width:190;應該是width: 190px;

來源

2008-10-13 11:23:23 Greg

是，這幾乎肯定是問題的原因，但對問題更具體的描述將有助於我們確定這一點。 – 2008-10-13 11:27:51

乍一看，它看起來像IE7有一些支持這種格式。起初，我打算建議擺脫div，並直接在TD上移動格式（寬度和高度），但我嘗試了這一點，似乎並沒有解決問題。

我想這不是一個很好的解決方案，但它有可能用更多的單元格與他們之間的不可見邊框替換rowspan單元格？但是，如果文本大於上部單元格的大小，則此解決方案會失敗。

來源

2008-10-13 11:42:15 rslite

-3

你一定要用CSS。不應該將表格用於佈局。

來源

2008-10-13 12:00:19 hmcclungiii

Doctype（4.01 Transitional沒有系統標識符（url））的選擇觸發IE中的Quirks模式，這使得它與其他瀏覽器高度不一致。

切換到：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

或者至少是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

（和，當然，validate但HTML和CSS（這會挑上你的長度值的缺失單位））。

來源

2008-10-13 12:31:48 Quentin

表格錯誤在IE瀏覽器（7）

回答

相關問題