IE 9 及更高版本的行为与 html 表格元素不同答案

【问题标题】：IE 9 and above behaves differently to html table elementIE 9 及更高版本的行为与 html 表格元素不同
【发布时间】：2013-02-05 00:56:20
【问题描述】：

我正面临 html Table 元素单元格宽度的问题。 IE8 和 IE9 中表格单元格的宽度不一样。请在下面的代码 sn-p 中找到我使用 table colgroup 将表格单元格的宽度和表格的宽度设置为 100%。

[HTML]

 <table  id="Grid1_Table" class="Table">
   <colgroup>
    <col style="width:20px">
    <col style="width:20px">
    <col style="width:180px">
    <col style="width:200px">
  </colgroup>
 <tbody>
   <tr>
    <td class="RowHeader"><div>&nbsp;</div></td>
    <td class="RecordPlusCollapse" ><div>&nbsp;</div></td>
    <td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
  </tr>
 </tbody>

[CSS]

.RowHeader
 { 
    background-color : black;
 }

 .GroupCaption
 {    
    background-color : #868981;
 }
 .RecordPlusCollapse
 {  
    background-color : red;
 }
 .Table
 {
    width:100%;
 }

请参考下面的提琴手文件来检查 IE8 和 IE9 的问题。

http://jsfiddle.net/KgfsM/21/

你能检查一下吗？

【问题讨论】：

您是否使用了 CSS 重置？有时这会解决这样的跨浏览器问题。

标签： html css internet-explorer html-table

【解决方案1】：

首先，标记违反了HTML表格模型；如果您尝试使用 HTML5 doctype 验证代码 sn-p（并添加了缺少的 </table>），验证器将报告错误“由元素 col 建立的表列 4 中没有以开头的单元格。”

其次，您将列宽设置为像素和总表格宽度为 100%。这构成了一个无法满足的请求，除非在非常特殊的情况下可用宽度恰好与像素宽度加上边框、边框间距和单元格间距的总和一致。难怪浏览器对此的反应不同。

因此，您需要一致地指定宽度。删除 100% 宽度的设置，或删除至少一项列宽设置。您可能仍然有问题（浏览器可能对此做出不同的反应），table-layout: fixed 可能无济于事（或可能引入新问题），但随后会出现一个新的、相对明确的问题。

【讨论】：