爲什麼IE在涉及collspan時忽略單元格的寬度？

考慮這個（剪斷）例如爲什麼IE在涉及collspan時忽略單元格的寬度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">> 
<body> 
    <table style="background-color: Navy; width:400px"> 
     <tr> 
      <td style="background-color: Green; width:35px">test</td> 
      <td style="background-color: Green; width:35px">test</td> 
      <td style="background-color: Green; width:35px">t</td> 
      <td style="background-color: Green">buffer</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
       <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" /> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

這在所有的瀏覽器，但IE瀏覽器工作正常。如果圖像足夠小（比如40），一切都很好。當圖像的大小比較大（比如200）時，IE開始贏取單元格寬度。
發生了什麼事？

--SIDENOTE--
給建議使用CSS的人。我知道。這是一個抽象的例子。表格仍然是有效的HTML，不應該擔心。表格數據應該在表格中。使用div重新創建表格至少與創建基於表格的佈局一樣糟糕。

來源

2009-04-20 Boris Callens

如果你硬編碼第4的寬度它的工作列它按預期工作...

... 
<td style="background-color: Green; width:295px">buffer</td> 
...

它忽略了colspan屬性，所以如果圖像的寬度超過了第一列，它就會混合在一起。搜索「IE6 colspan bug」 ......

[編輯：] 如果你有一個表來做到這一點，那（不漂亮）可能的工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">> 
<body> 
    <table style="background-color: Navy; width:400px"> 
     <tr> 
      <td> 
      <table width="100%"> 
       <tr> 
       <td style="background-color: Green; width:35px">test</td> 
       <td style="background-color: Green; width:35px">test</td> 
       <td style="background-color: Green; width:35px">t</td> 
       <td style="background-color: Green">buffer</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
      <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" /> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

讓我想起了一個小的this

但我真的認爲你應該使用CSS進行佈局！

來源

2009-04-20 10:23:01 Xn0vv3r

確實。太好了，現在我必須將寬度計算放在我的頁面中，因爲數字列是可變的：S因此我無法將樣式放入CSS中！上帝我討厭IE瀏覽器！ – 2009-04-20 10:27:08

因爲「上帝......」而被評爲好評如果IE不在那裏，一個網站的設計時間大約是第三個我認爲...... – Xn0vv3r 2009-04-20 10:30:41

如果有什麼DOCTYPE是你指定你的<html>標籤上面

請問，如果你將其更改爲

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

來源

2009-04-20 10:14:46

在這個抽象的例子中，我沒有。在我真正的代碼中，它是嚴格的XHTML 1.0。改變它並沒有幫助。我會更新OP來反映我的文檔類型。 – 2009-04-20 10:20:57

奇怪。只是在那裏嘗試過，第二排的colspan似乎正在破壞它......似乎是一個已知的問題。 http://www.velocityreviews.com/forums/t158704-ie-screws-up-table-cell-widths-when-colspan-is-used.html – 2009-04-20 10:24:26

試試這個：

<style type="text/css">table {table-layout: fixed;}</style>

應該作品，這僅發生在IE6我猜（不與IE7 & IE8）

，或者您可以使用寬度：在你的第4列自動

<td style="background-color: Green; width: auto;">buffer</td>

順便說一句我希望你沒有使用上面的代碼來創建一個基於表格的佈局（這是舊時尚，嘿你應該學習CSS佈局這一天）

來源

2009-04-20 10:32:33 Dels

嘗試將溢出 CSS屬性上的幾件事情，如可能表

如：<table style="background-color: Navy; width:400px;**overflow: hidden**">

來源

2009-04-20 10:37:43 Overflew

有一個名爲960是簡單易學的基於CSS網格系統，並且將工作IE，FF和Sarari。它將幫助執行您定義的列跨度並創建更清晰的標記。這是一個不錯的tutorial。

起初我很懷疑，因爲我是一個老的ASP.NET傢伙，但它爲我節省了大量的維護和跨瀏覽器問題。我還發現，通過少用表格，我可以更快地結合更多的客戶端功能。這是一個明確的優點。

來源

2009-04-20 10:55:42

爲什麼IE在涉及collspan時忽略單元格的寬度？

回答

相關問題