html - 表格在 Firefox 中添加了额外的像素

Question

我刚开始为飞镖组织创建网站，但在我的表格布局中遇到了一些问题。

我制作了一张表格，表格布局固定，宽度为 978 像素。当我查看 firefox 时，不知何故不知何故总是添加另一个 8px。在 safari 中，一切都很完美。我不知道这里发生了什么。

我在下面的链接上提供了带有问题的网络。欢迎提出任何建议。

.dt
{
    margin: 0px;
    border-width: 0px;
    border-spacing: 5px;
    border-collapse: separate;
    table-layout: fixed;
}
.dt th
{
    border-bottom: 1px solid #cdcdcd;
    color: #5197fc;
    font-weight: bold;
    font-size: 12px;
}
.dt td
{
    border-bottom: 1px dotted #cdcdcd;
    overflow: hidden;
    white-space: nowrap;
}

<table runat="server" style="width: 978px;" class="dt">
    <tr runat="server">
        <th runat="server" class="left" style="width: 511px">Naam</th>
        <th runat="server" class="left" style="width: 152px">Tel/Gsm</th>
        <th runat="server" class="left" style="width: 252px">Email</th>
        <th runat="server" class="left" style="width: 38px"></th>
    </tr>
    <tr runat="server">
        <td runat="server" style="width: 511px"></td>
        <td runat="server" style="width: 152px"></td>
        <td runat="server" style="width: 252px"></td>
        <td runat="server" style="width: 38px">
            <asp:ImageButton runat="server" ID="EditAccount" ImageUrl="~/Images/pencil.png" CommandName="EditAccount" Width="16px" Height="16px" />
            <asp:ImageButton runat="server" ID="DeleteAccount" ImageUrl="~/Images/delete.png" CommandName="DeleteAccount" Width="16px" Height="16px" />
        </td>
    </tr>
</table>

Check problem here

在文本框中键入 A，然后按搜索以查看问题。

Answer 1

我设法通过多种方式解决了我的问题。我已经将边框折叠设置为折叠并调整了除每行最后一个表格单元格的宽度之外的所有表格单元格的宽度。由于某种原因，firefox 永远不会给出您要求的单元格的实际宽度。它总是增加或缩回一些显示奇怪行为的宽度。

这就是为什么我删除了整个表格并切换到带有“display: table”的 div。这不会给我带来那些奇怪的行为问题。

.dt {
    display: table;
}
.tr {
    display: table-row;
}
.dt .th {
    display: table-cell;
    border-bottom: 1px solid #cdcdcd;
    color: #5197fc;
    font-weight: bold;
}
.dt .td {
    border-bottom: 1px dotted #cdcdcd;
    overflow: hidden;
    white-space: nowrap;
}

 <div class="dt" style="width: 960px">
    <div class="tr">
        <div class="th" style="width: 500px">Naam</div>
        <div class="th" style="width: 150px">Tel/Gsm</div>
        <div class="th" style="width: 250px">Email</div>
        <div class="th" style="width: 60px">&nbsp;</div>
    </div>
    <div class="tr">
        <div class="td" style="width: 500px">&nbsp;</div>
        <div class="td" style="width: 150px">&nbsp;</div>
        <div class="td" style="width: 250px">&nbsp;</div>
        <div class="td" style="width: 60px">&nbsp;</div>
    </div>
</div>