為什麼Firefox在某些HTML表格上缺少邊框



html-table border (7)

我使用的是Firefox 3.5.7,並且我在多個HTML表格中使用了相同的CSS,但是有些示例中沒有顯示部分邊框。

對我來說沒有意義的是,另一個HTML表格在同一頁面上的相同CSS工作正常。 此外,從邊界的角度來看,Internet Explorer中的同一頁面看起來很好。

這是一個帶有示例的圖像,在這種情況下您可以看到第一個表的底部缺少邊框。

有沒有人知道為什麼會發生這種情況?


Answer #1

只需使用border-spacing:0; 希望這能解決你的問題。


Answer #2

當瀏覽器縮放增加時,邊框開始丟失。 我能夠通過以下方式解決它。 在Chrome和Firefox中測試過。

padding: 0.5px !important

Answer #3

這是由於桌子(缺少底部邊框)在div內部造成的...邊界顯然沒有在桌面高度計算,所以邊框在那裡但沒有顯示。

給周圍的div提供1px的邊緣底部解決了這個問題。


Answer #4

為我工作實現答案@Donald Payne

*(.table - bootstrap類)

table.table {
    border-collapse: separate !important;
}

table.table tr,
table.table th,
table.table td {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid #DDD !important;
    border-top: 1px solid #DDD !important;
}

table.table td:last-child,
table.table th:last-child {
    border-right: 1px solid #DDD !important;
}

table.table tr:last-child td {
    border-bottom: 1px solid #DDD !important;
}

table.table {
    border: 0 !important;
}

table.table thead tr:last-child th,
table.table thead tr:last-child td {
  border-bottom: 1px solid #DDD !important;
}

table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
  border-top-width: 0 !important;
}

Answer #5

也許你已經放大/縮小了一點。 當您執行Ctrl + Scrollwheel時,這可能會意外或有意發生。 也許它沒有完全重置為縮放級別零。 然後,在某些網站上也可以識別這種錯誤呈現行為,也在SO處。

要解決此問題,只需按Ctrl + 0或執行視圖 > 縮放 > 重置將縮放級別重置為默認值。

這是Firefox / Gecko的錯誤410959 。 這會影響帶有border-collapse:collapse表格border-collapse:collapse 。 這是從2008年開始,並沒有真正的進展,所以你可能需要找到一個解決方法。 一種方法是使用border-collapse:separate在每個單元格的基礎上border-collapse:separate和擺弄邊框。


Answer #6

在我正在處理的應用程序中在Firefox中縮小時發現了類似的問題。

主要原因是CSS border-collapse屬性設置為collapse

將其更改為separate而不是修復問題。 但是,這意味著我必須重新考慮邊框應用於桌子各個部分的方式,因為否則邊框的厚度看起來會加倍。 我最終不得不使用jQuery為每個tr的最後一個tdth提供一個特殊的“last”類,以及表中的最後一個tr 。 我的查詢是這樣的:

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');

我的CSS規則類似於:

table
{
    border-collapse: separate !important;
}

table tr, table th, table td
{
    border-right-width: 0;
    border-bottom-width: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

table td.last, table th.last 
{
    border-right: 1px solid black;
}

table tr.last td
{
    border-bottom: 1px solid black;
}

table
{
    border: 0;
}

我最終使用瀏覽器定位,因此我只將這些規則應用於Firefox用戶,但它可能適用於所有瀏覽器,我還沒有測試過。


Answer #7

丟失表邊框時遇到了同樣的問題。 我的解決方案是:

table{
  border-collapse: collapse !important;
  border-spacing: 0px;
  border: 1px solid #DDD;
}

表行的邊框:

table tr{
  border-bottom: 1px solid #DDD !important;
}

我在我的佈局中使用Bootstrap,表也有引導css類,如“table table-striped table-bordered”

當我嘗試使用解決方案時,此解決方案適用於我

border-collapse: separate !important;

它對我不起作用。





border