表格邊框在Firefox中排列不正確

Question

我的表格的每一行都有一個1px邊框頂部，由於某種原因，表格中的第一個非頭部單元格獲得了額外的一點空間（似乎是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，這樣當前表格單元格將不會改變。