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>