html - IE 9 及以上版本与 html 表格元素的行为不同

Question

我正面临 html 表格元素单元格宽度的问题。表格单元格的宽度在 IE8 和 IE9 中是不一样的。请找到下面的代码片段，其中我使用表格列组将表格单元格的宽度设置为 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%;
 }

请引用下面的 fiddler 文件来检查 IE8 和 IE9 的问题。

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

你能检查一下吗？

Answer 1

首先，标记违反了HTML表格模型；如果您尝试使用 HTML5 文档类型(并添加了缺失的 </table>)来验证代码片段，验证器将报告错误“由元素 col 建立的表第 4 列没有开始的单元格。”

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

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