Question

我已经创建了一个表格，可以在我测试的所有浏览器中正确呈现，包括IE 8,9,10等。但是，在IE11中，最后一个标题列似乎与之前的列有一个边框，从而创建一条白线。

JSFiddle重新创建问题： http://jsfiddle.net/xx4Z4/32/

HTML：

  <table class ="table_compare">
        <colgroup>
            <col class="tablefeature" />
            <col span="3"/>
        </colgroup>

        <thead>
            <tr>
                <th class="first"><h2>Heading 1</h2></th>
                <th><h2>Heading 2</h2></th>
                <th><h2>Heaading 3</h2></th>
                <th class="last"><h2>Heading 4 - IE Issue</h2></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="feat">Feature 1</td>
                <td>Text 1</td>
                <td>Text 2</td>
                <td>Text 3</td>
            </tr>
            <tr class="light_grey_bg">
                <td class="feat">Feature 2</td>
                <td>Text 1</td>
                <td>Text 2</td>
                <td>Text 3</td>
            </tr>
            <tr>
                <td class="feat">Feature 3</td>
                <td>Text 1</td>
                <td>Text 2</td>
                <td>Text 3</td>
            </tr>
            <tr class="order_row">
                <td class="feat">Last row</td>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
            </tr>
        </tbody>
  </table>

CSS：

.table_compare{
    border-spacing: 0;
    padding: 0;
    border-collapse: separate;
    vertical-align: middle;
    width: 600px;
    margin-top: 22px;
    box-sizing: border-box;
}

.table_compare tbody{
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: #c2c2c2;
}

.table_compare thead th{
    height: 35px;
    padding: 0;
    background: #555;
    background-position: 0 bottom;
    background-clip: padding-box;
}

.table_compare th.first{
    border-radius: 6px 0 0 0;
}

.table_compare th.last{
    border-radius: 0 6px 0 0;
}


.table_compare h2{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    padding: 0;
    display: inline;
}

.table_compare tbody, .table_compare thead, .table_compare tr,     .table_compare th, .table_compare td{
    text-align: center;
    vertical-align: middle;
}

.table_compare td{
    border-right-style: solid;
    border-right-width: thin;
    border-spacing: 0;
    padding: 0;
    height:28px;
    border-right-color: #c2c2c2;
}

.table_compare td.feat, .table_compare th.first{
    padding-left: 15px;
    text-align: left;
    width: 257px;
}

.table_compare td.feat{
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: #c2c2c2;
}

.light_grey_bg, .order_row{
    background-color:#f1f1f1;
}

.light_grey_bg, .order_row{
    background-color:#f1f1f1;
}

.order_row td{
    height: 37px;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #c2c2c2;
}

有人知道问题的原因吗？

它必须是某个地方的CSS，但为什么IE11这样做我不知道。

图片： enter image description here

Answer 1

这似乎是一个IE 11错误，由一些特殊的设置组合触发，因此各种修改使它消失。一种可能性是删除以下代码，除了这个bug之外似乎没有任何影响：

.table_compare td.feat{
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: #c2c2c2;
}

另一种简单的方法是，通过添加以下内容，在最后一个标题单元格上显式设置边框，颜色与背景颜色相同：

.table_compare th.last { border-left: solid #555 1px }

IE11表格显示问题 - 表格中的行

1 个答案: