html - 表的边框在 IE 中不起作用

Question

我有应用了一些样式的数据网格表。 Chrome 和 Firefox 一切正常，但边框不适用于 IE 中的表格。当我将相同的样式应用于表 tbody td 时，可以看到边框。在以下样式中，border-left 在 IE 中不起作用。

.datagrid table thead th {
color: #4180ab;
font-size: 12px;
font-weight: bold;
line-height: 30px;
text-align: center;
border-left: 1px solid #a8cbd1;
background: #f1f6fa;
}

//HTML 标记

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead class="thead">
    <tr>
        <th>No</th>
        <th>Application Number</th>
        <th>Given Name</th>
        <th>Family Name</th>
        <th>Nationality</th>
        <th>Passport Number</th>
        <th>Visa Type</th>
        <th>Transaction Type</th>
        <th>Submission Date</th>
    </tr>
</thead>
<tbody>
    <tr class="gradeX">
        <td>1</td>
        <td>APP1212</td>
        <td>Steven</td>
        <td class="center">Gerrard</td>
        <td class="center">British</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeC">
        <td>2</td>
        <td>APP1012</td>
        <td>Fernando</td>
        <td class="center">Torres</td>
        <td class="center">Spanish</td>
        <td>12121212</td>
        <td>Short Work Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>3</td>
        <td>APP1512</td>
        <td>Xabi</td>
        <td class="center">Alonso</td>
        <td class="center">Spanish</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>4</td>
        <td>APP1282</td>
        <td>Zlatan</td>
        <td class="center">Ibrahimovic</td>
        <td class="center">Swedish</td>
        <td>12121212</td>
        <td>Short Work Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>5</td>
        <td>APP1612</td>
        <td>Robin</td>
        <td class="center">Van Persie</td>
        <td class="center">Dutch</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>

            <tr class="gradeX">
        <td>6</td>
        <td>APP1212</td>
        <td>Steven</td>
        <td class="center">Gerrard</td>
        <td class="center">British</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png" alt="" class="lock"></td>
    </tr>

</tbody>

</table>

Answer 1

我见过的解决这个问题的最好方法是应用

background-clip: padding-box;

到第 th 个元素。

在某些情况下，IE 似乎会在边界上渲染背景。