在Firefox中，表边框没有正确排列

Question

我的表的每一行都有一个1px边框顶部，并且由于某种原因，表中的第一个非标头单元格获得了额外的空间(似乎是1 1px)，这会抛出行之间的边框。我知道要解决这个问题，我可以消除边界塌陷--崩溃--但我真的想弄清楚为什么他会这样。

我的许多其他表都有大致相同的布局，而且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元素)，则行及其边框将正确对齐。

如果需要此单元格包含嵌套表(flex或普通表)，我建议添加一个嵌套的div，该嵌套class具有新的class，因此当前的表单元格将保持不变。