Question

使用 Firefox 时遇到css问题，我不知道它到底在哪里。

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

我在 Firefox 中查看表格奇怪：这就是FireBug中最后一个TH元素（上次激活）的外观：

在 Chrome 中，它看起来不错：这就是Chrome中最后一个TH的外观：

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 pixel 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/ （尝试在不同的浏览器中测试它，看看它们如何返回不同的宽度）

Answer 2

我在你的CSS中发现了一些冗余边框：

table, thead, th, td {
    border: 1px solid #ddd;
    border-collapse: collapse;
}

仅与td和th接壤会产生相同的效果。

另外，你的＆＃34;标题＆＃34;表格具有样式属性style="border-left:0" 当我禁用边框折叠时，我发现TD和TH元素的宽度略有不同，因此问题可能是由浏览器的边框折叠算法之间的差异造成的。

尝试删除style="border-left:0"并将上述规则分为两部分：

table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid #ddd;
}

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

2 个答案: