ie8下table的colspan属性与max-with属性的显示错乱问题
今天项目测试时发现了一个table的colspan样式问题，发现colspan单元格下的的元素设置max-with后将上面的第二列单元格撑开了，导致后面单元格的内容换行，先看代码：
html代码：
<table class="basicTable"> <tr> <td class="td-right edu_width120">合同编号：</td> <td class="td-padding15"><input type="text" name="ContractsCode" id="ContractsCode" class="scinputlong" value="" maxlength="25" /></td> <td class="td-right edu_width120">合同名称：</td> <td class="td-padding15"><input type="text" name="ContractsName" id="ContractsName" class="scinputlong" value="" maxlength="25" /></td> </tr> <tr> <td class="td-right"><span class="no_nullspan">*</span>实收金额：</td> <td class="td-padding15"><input type="text" name="RealMoney" id="RealMoney" class="scinputlong" value="" maxlength="19" /></td> <td class="td-right"><span class="no_nullspan">*</span>承租开始时间：</td> <td class="td-padding15"> <div class="input-group date form_date" id="Startdate_div"> <input id="Startdate" name="Startdate" class="scinputtimelong" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div></td> </tr> <tr> <td class="td-right"><span class="no_nullspan">*</span>承租结束时间：</td> <td class="td-padding15"> <div class="input-group date form_date" id="Enddate_div"> <input id="Enddate" name="Enddate" class="scinputtimelong" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div></td> <td class="td-right">签约时间：</td> <td class="td-padding15"> <div class="input-group date form_date" id="SignatureDate_div"> <input id="SignatureDate" name="SignatureDate" class="scinputtimelong" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div>
</td> </tr> <tr> <td class="td-right td-top"> 备注信息：</td> <td colspan="3" class="td-padding15"><textarea name="Remarks" id="Remarks" maxlength="250" class="td-textarea-border" style="min-height:70px;">@Model.Remarks</textarea></td> </tr> <tr> <td class="td-right"> 合同附件：</td> <td class="td-padding15" colspan="3"> <div id="file_upload_contr" class="file_upload"></div> <div id="" class="file_queue"> <div class="file_queue_item hidden" id="file_upload_contr_q"> <div class="cancel_item"> <a id="file_upload_contr_cancel" href="#" onclick="DelAttachment('file_upload_contr','@Model.AttachmentInfoName')">X</a> </div> <a class="" id="file_upload_contr_name" href="/Base/MyDownLoad?Filepath=@Model.AttachmentInfoPath" target="_blank">@Model.AttachmentInfoName</a> </div> </div> <input id="file_upload_contr_path" type="hidden" value="@Model.AttachmentInfoPath" /> <input id="file_upload_contr_guid" type="hidden" value="@Model.AttachmentInfoID" /> </td> </tr> </table>
css代码（部分）：
.basicTable {
line-height: 35px;
width: 100%;
}
.basicTable tr td {
padding: 0 5px 0 5px;
}
.file_queue_item {
background-color: #f5f5f5;
border-radius: 3px;
font: 11px Verdana,Geneva,sans-serif;
margin-top: 5px;
max-width: 350px;
padding: 10px;
}
.td-right {
text-align: right;
}
.td-padding15 {
padding-left: 15px !important;
}
.edu_width120 {
width: 120px !important;
}
当附件上传后中显示附件名称时，效果如下：
解决方案：
在table中增加样式： table-layout:fixed;
参考文章：http://www.w3help.org/zh-cn/causes/HE1001
文章内容：
关于表格元素的自动布局
在 W3C CSS2.1 文档中，TABLE 元素在自动布局时的列的宽度计算规则是这样的：
- 1. 计算每一个单元格的最小宽度 (MCW)：经过格式化的内容可能会扩展到很多行，但是不会溢出单元格。如果某列的宽度设置值 (W) 大于 MCW，那么 W 就是单元格的最小宽度。另外，计算每个单元格的“最大”单元格宽度：不换行的将内容格式化，除非有显式的换行。
- 2. 对每一列，根据只占该列的单元格的宽度确定最大最小宽度。最小值是其 MCW 最大的那个单元格的宽度（或列的 'width'，取较大的）。最大值是取最大单元格宽度最大的单元格宽度（或列的 'width'，取较大的）。
- 3. 对于跨越多列的单元格，增加这些列的最小宽度，使它们的和至少跟单元格等宽。对于最大宽度也照样处理。如果可能的话，每个扩展到的列增加的宽度应大致相同。
- 4. 对于每一个宽度值不是 auto 的列组，增加它所跨列的最小宽度，使宽度和至少跟列组的宽度等宽。
其中在第三步，提到了当表格中出现跨越多列的单元格时，它所跨列宽的计算规则：相应的增加所跨列的最小宽度。
虽然如此，但是对增加的方式没有明确说明，只是说，如果可能，所跨列增加的宽度应大致相同。
因此，对于跨列后的列宽计算方式，在各浏览器也就产生了差异。
关于 表格元素的自动布局 的详细信息，请参考 W3C CSS2.1 规范 17.5.2.2 Automatic table layout 中的内容。
问题描述
单元格的 colspan 属性在 IE 中可能影响 TABLE 元素的自动布局。
造成的影响
此问题严重时可能会导致页面布局混乱。
受影响的浏览器
| IE6 IE7 IE8 |
|---|
问题分析
请看以下测试用例。
分析以下代码：
<script type="text/javascript">
window.onload = function() {
function $(id) {
return document.getElementById(id);
}
$("info").innerHTML = "red cell clientWidth : " + $("td1").clientWidth +
"<br/>blue cell clientWidth : " + $("td2").clientWidth +
"<br/>gold cell clientWidth : " + $("td3").clientWidth;
}
</script>
<table id="T" cellpadding="0" cellspacing="0">
<tr>
<td id="td1" >td1</td>
<td id="td2" >td2</td>
</tr>
<tr>
<td id="td3" colspan="2">td3</td>
</tr>
</table>
computed clientWidth:
<div id="info" ></div>
- T 是一个自动布局的表格，含两行，两列。T 中『cellpadding="0" cellspacing="0"』的设置是为了去除单元格之间 padding 等的影响。
- td2 的宽度是100px，大于其内容宽度；
- td3 的宽度是300px，大于其内容宽度。
根据 CSS2.1 规范中的描述可知，td1 的最终宽度应为 200px。
这段代码在不同的浏览器环境中的表现：
| IE | Firefox Opera Safari Chrome |
|---|---|
 |
 |
可见，在 IE 中，单元格的 td1 和 td2 宽度被重新分配。
将 td2 的宽度设置 (width:100px;) 去掉后：
| IE Firefox Opera Safari Chrome |
|---|
 |
解决方案
1. 设置 TABLE 的 'table-layout' 特性值为 fixed，使用固定布局的表格元素可避免此问题。
2. 单元格所跨过的列的宽度都设置成 auto。
