IE10表格佈局：如果使用colspan，則修復損壞

以下HTML在所有常見瀏覽器（包括IE7-9）中完美呈現，但在IE10中失敗。即使在兼容模式下運行IE10，也會失敗。IE10表格佈局：如果使用colspan，則修復損壞

<html> 
    <body> 
     <table style="table-layout:fixed;width:500px"> 
     <colgroup> 
      <col style="width:100px" ></col> 
      <col ></col> 
      <col style="width:100px" ></col> 
      <col ></col> 
     </colgroup> 
     <tbody> 
      <tr> 
       <td colspan="2"> 
        <div style="background:red;"> red </div> 
       </td> 
       <td colspan="2"> 
        <div style="background:green;"> green </div> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

儘管不是在所有其他的瀏覽器的2個細胞的大小相等，在IE10（上Windows7的運行時，至少）所述第一小區是比所述第二寬。

此HTML在IE 9 /視窗7：

In IE 9

在IE相同的HTML 10 /視窗7：

In IE 10

Testpage：http://www.dinkypage.com/167605

報告錯誤： https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

有誰知道這個問題的解決方案/解決方法？

更新：我要求微軟重新打開我報告的錯誤，因爲這違反了w3c標準。答案是：

「您報告的問題是設計問題，Internet Explorer只使用第一套TD標記來設置列的寬度。」

的W3C標準（http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout）表示：

在固定表格佈局算法中，每個列的寬度被確定爲如下：

A柱元件與其它的值'width'屬性的'auto'設置該列的寬度。

否則，第一行中'width'屬性值不是'auto'的單元格將確定該列的寬度。如果單元格跨越多個列，則寬度將在列上劃分。

任何剩餘的列等分剩餘的水平表空間（減去邊框或單元格間距）。

這意味着，這個功能是通過設計在IE 10打破我建議使用不同的瀏覽器或留在IE 9 ...

來源

2013-03-07 Michael Wyraz

在Windows 8上的IE 10中存在同樣的問題 – 2013-03-07 15:39:50

如果所有的都有一個定義的寬度，那麼問題也是存在的...... – 2013-03-07 15:46:57

只需將樣式分配給第一個'tr'中的'td's而不是' col's。 – Teemu 2013-03-07 19:06:52

我現在的解決方法是以下樣式：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    table colgroup { display: table-row; } 
    table colgroup col { display: table-cell; } 
}

這使得瀏覽器像tr/td處理colgroup/col並且類似於Teemu的建議（但沒有醜陋的html黑客）。媒體選擇器使得CSS只對IE10可見+

來源

2013-03-12 08:07:52

我碰到過這個，實際上在IE9中。我發現的唯一的解決辦法，實際上是把在一個隱藏的虛擬第一行中的表：

<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>

然後，爲了擺脫這個差距，我將負邊距整個表。不夠優雅，但似乎完成了這項工作。

來源

2013-03-27 09:26:50 MisterNeutron

我對此有點懷疑，因爲我們之前從未在IE9中遇到過這樣的問題 - 我在IE9（以及除IE10之外的所有其他瀏覽器）中編寫的例子。 – 2013-04-04 20:14:17

很難整理出來，因爲你的HTML裏面有很多其他相關的錯誤。通過驗證器提供你的代碼，你會明白我的意思。 – MisterNeutron 2013-04-04 21:15:56

我通常作出這樣

<colgroup width="100%"> // for table a whole 
    <col width="50%"> // for each column 
    <col width="50%"> 
</colgroup>

50 2列，3 33％等

這個工作對IE10％。

來源

2015-04-29 08:07:16

IE10表格佈局：如果使用colspan，則修復損壞

回答

相關問題