表在firefox

Question

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

我制作了一张桌子布局固定，宽度为978px的桌子。 当我看一看firefox时，不知怎的原因总是会增加另一个8px。在野生动物园中，一切都很完美 我不知道这里发生了什么。

我使用下面链接中提供的问题制作了网页。 欢迎任何建议。

.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>

Answer 2

这是因为Teb元素上有border-spacing: 5px;。减小该值应减少“额外像素”的数量。

Answer 3

添加边框折叠：折叠;应该解决你的问题