将表头与Firefox中的其他表主体对齐

Question

使用Firefox时我有一个CSS问题,我不知道它究竟在哪里.

我有一个由2个表构建的表,它使用一个表Thead并填充第二个表tbody,然后它看起来像一个带有Fix Header的表,一切正常,直到FireFox破坏了聚会.

我在Firefox中查看表格奇怪: 这就是THFireBug中最后一个元素(Last activated)的样子:

在Chrome中它看起来不错: 这就是最后一次TH在Chrome中的表现:

HTML:

<div class="modal-scrollable-table-wrapper">
                            <table style="border-left:0">
                                <thead class="fixed-header active-rules" data-table="activeRulesTable">
                                    <tr>
                                        <th data-sort="0">Status</th>
                                        <th data-sort="1">Name</th>
                                        <th data-sort="2">Action</th>
                                        <th data-sort="3">Condition</th>
                                        <th data-sort="4">Last activated</th>
                                    </tr>
                                </thead>
                            </table>

                            <div class="modal-scrollable-table-body">
                                <table id="activeRulesTable" class="cell-border">
                                    <thead style="display: none">
                                    </thead>
                                    <tbody>
                    //get the rows from the server and populates using js
                                    </tbody>
                                </table>
                            </div>
                        </div>

CSS:

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
table, thead, th, td {
    border: 1px solid #ddd;
    border-collapse: collapse;
}


.modal .modal-scrollable-table-wrapper table {
    table-layout: fixed;
    width: 902px;
}

#activeRulesTable {
    border-top: 0;
}

.modal .modal-scrollable-table-wrapper td {
    text-align: center;
    font-size: 12px;
    background: transparent;
    padding: 8px 5px;
    color: #6b6b6b;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.modal .modal-scrollable-table-wrapper th {
    background: #f8f8f8;
    /*border: 1px solid #c6c6c6;*/
    /*border-bottom: none;*/
    vertical-align: middle;
    color: #46aaf6;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 5px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(1) {
    width: 62px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(2) {
    width: 169px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(3) {
    width: 205.5px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(4) {
    width: 332px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(5) {
    width: 78px;
}

.modal#automated-rules-log-modal tr > th,
.modal#automated-rules-log-modal tr > td {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.scroll tr {
    display: flex;
    /*border-width: 0 0 0 0;*/
}

.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: 300px;
}

#activeRulesTable th {
    border-top-width: 1px;
    border-right-width: 0;
    height: 50px;
    line-height: 30px;
}

    #activeRulesTable th:last-of-type {
        border-right-width: 1px;
        line-height: 18px;
    }

编辑: 我在这个问题找到了一个更好的解决方案:firefox 1像素bug 我用border-spacing = 0而不是border-collapse它工作正常.

Answer 1

我认为你的0.5px导致了这个问题:

.modal .modal-scrollable-table-wrapper tr > :nth-child(3) {
    width: 205.5px; /* change this to 205 or 206 */
}

原因是每个浏览器计算十进制像素与其他像素不同.通常,在CSS中使用非整数像素值设置会混淆浏览器,因为它们必须向上/向下舍入.你可以在这里看到一个例子:

http://cruft.io/static/rounding/ (尝试在不同的浏览器中测试它,看看它们如何返回不同的宽度)