我正面临着html表格元素单元格宽度的问题。在IE8和IE9中,表格单元的宽度不同。请找到以下代码片段,其中我使用表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/

你能检查一下吗?

最佳答案

首先,标记违反了HTML表模型;如果您尝试使用HTML5 doctype验证代码段(并添加了丢失的</table>),则验证器将报告错误“由元素col建立的表第4列中没有任何单元格。”

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

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

关于html - IE 9及更高版本的行为与html表元素不同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14972818/

10-12 12:24
查看更多