IE 9及以上的行为不同于html表格元素 [英] IE 9 and above behaves differently to html table element

问题描述

我面临html Table元素单元格宽度的问题。表单元格的宽度在IE8和IE9中不相同。请找到以下代码片段，其中，我将表格单元格的宽度设置为表colgroup，并将表格宽度设置为100％。

[Html]

 < table id =Grid1_Tableclass =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 =2class =GroupCaption>订单ID：0  -  1项目< / td> 
< / tr> 
< / tbody> 
  

[CSS]

  .RowHeader 
 {
 background-color：black; 
} 
 
 .GroupCaption 
 {
 background-color：＃868981; 
} 
 .RecordPlusCollapse 
 {
 background-color：red; 
} 
。表
 {
 width：100％; 
} 
  

请参阅下面的fiddler文件来检查IE8和IE9的问题。 / p>

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

您可以检查一下吗？

解决方案

首先，标记违反了HTML表模型;如果您尝试使用HTML5 doctype（和缺少的< / table> 添加）验证代码片段，验证器将报告错误

其次，您以列表宽度（以像素为单位）和总表宽度设置为100％。这构成了不能实现的请求，除非在可用宽度恰好与像素宽度加边界，边界间距和单元间距的和一致的非常特殊的情况下。难怪浏览器会对此产生不同的反应。

因此，您需要一致地指定宽度。请删除100％宽度的设置，或删除至少一个列宽设置。你可能仍然有一个问题（浏览器可能会有不同的反应，甚至对此），和 table-layout：fixed 可能不会帮助（或可能会引入新的问题）一个新的，相对定义明确的问题。

I am facing the issue with html Table element cell width. Width of the table cell is not same in IE8 and IE9.Please find the below code snippet where i set the width for table cell using table colgroup and width for table as 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%;
 }

Please refer the below fiddler file to check the issue with IE8 and IE9.

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

Could you please check on this?

解决方案

First of all, the markup violates the HTML table model; if you try to validate the code snippet using HTML5 doctype (and the missing </table> added), the validator will report the error "Table column 4 established by element col has no cells beginning in it."

Second, you are setting column widths in pixels and the total table width as 100%. This constitutes a request that cannot be fulfilled except in a very special case where the available width happens to coincide with the sum of the pixel widths plus borders, border spacing, and cell spacing. It’s no wonder that browsers react differently to this.

Thus, you need to specify the widths consistently. Either remove the setting of 100% width, or remove at least one of the column width settings. You might still have a problem (browsers may react differently even to this), and table-layout: fixed might not help (or might introduce new problems), but then there would a new, relatively well-defined problem.

这篇关于IE 9及以上的行为不同于html表格元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！