Firefox 中的表格边框没有正确对齐

Question

我的表格的每一行都有一个 1 像素的顶部边框，并且由于某种原因，表格中的第一个非标题单元格会获得额外的空间（看起来是 1 像素），这会脱离行之间的边界线。我知道要解决这个问题，我可以删除border-collapse:collapse——但我真的很想弄清楚为什么会这样。

我的许多其他表格的布局大致相同，Firefox 中的边框没有问题。

小提琴：https://jsfiddle.net/0nL653pj/1/

CSS：

table {
  box-sizing: border-box;
  border-collapse: collapse;
border-spacing: 0;
}

.fullWidth {
  width: 100%;
}

.standardTable th {
    background: #999;
    border-right: 1px solid #fff;
    border-bottom: 3px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5em;
    padding: 2px 10px;
    text-transform: uppercase;
}
th, td, caption {
    font-weight: normal;
    vertical-align: middle;
    text-align: left;
}

.w100 {
    width: 100px;
}
.center {
    text-align: center;
}

.action-table tr:nth-child(2) td {
    border-top: 1px solid transparent;
}
.action-table td.icon-cell {
    line-height: 17px;
}
.action-table tr td {
    border-top: 1px solid #d9d9d9;
    height: 54px;
    position: relative;
}
.action-table tr td {
    border-top: 1px solid #d9d9d9;
    height: 54px;
}
.standardTable td {
    color: #444;
    font-weight: 400;
    font-size: 12px;
    height: 43px;
    padding: 0 10px;
    vertical-align: middle;
}
.icon-element {
    display: table;
    vertical-align: middle;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

HTML：

<table class="standardTable fullWidth action-table">
    <tbody><tr>
        <th>Policy Name</th>
        <th class="center w100">Earned YTD</th>
        <th class="center w100">Used YTD</th>
        <th class="center w100">Current Balance</th>
        <th class="center">Action</th>
    </tr>


    <tr id="RowType-1">
        <td class="icon-cell icon-element">
            <div class="time-off-icon-wrapper"><span class="action-icon icon-vacation"></span></div>
        fg Vacation Policy
    </td>
    <td class="center">
                <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
            <span class="unit-value">13.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
                <span class="unit-value">-13.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
    </td>
</tr>



    <tr id="RowType-2">
        <td class="icon-cell icon-element">
            <div class="time-off-icon-wrapper"><span class="action-icon icon-sick"></span></div>
        Full Time Employee Sick Policy
    </td>
    <td class="center">
                <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
            <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
                <span class="unit-value">0.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
    </td>
</tr>



    <tr id="RowType-3">
        <td class="icon-cell icon-element">
            <div class="time-off-icon-wrapper"><span class="action-icon icon-other"></span></div>
        Personal hours Policy
    </td>
    <td class="center">
                <span class="unit-value">50.00</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
            <span class="unit-value">2.50</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
                <span class="unit-value">47.50</span>
        <span class="unit-label">hrs</span>
    </td>
    <td class="center">
    </td>
</tr>



<tr id="RowType-4">
    <td class="icon-cell icon-element">
        <div class="time-off-icon-wrapper"><span class="action-icon icon-holiday"></span></div>
            Holiday Policy*
        </td>
        <td class="center">
            <span class="SecondaryText">n/a</span>
        </td>
        <td class="center">
            <span class="unit-value">0.00</span>
            <span class="unit-label">hrs</span>
        </td>
        <td class="center">
            <span class="SecondaryText">n/a</span>
        </td>
        <td class="center">
        </td>
    </tr>


</tbody></table>

Answer 1

由于某种原因，你有这个：

.icon-element {
    display: table;
    vertical-align: middle;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

您首先设置display: table，然后通过将其设置为display: flex 来覆盖它。以这种方式设置一个单元是否有特殊原因？如果将此单元格设置为 display: table-cell（或者如果您只是删除其他 display 元素），则行及其边框将正确对齐。

如果您需要此单元格包含嵌套表格（弹性表格或普通表格），我建议添加一个嵌套的 div，其中包含您的新 class，这样当前表格单元格将保持不变。