web-dev-qa-db-ja.com

Firefoxが一部のHTMLテーブルの境界線を欠いている理由

Firefox 3.5.7を使用していて、同じCSSを複数のHTMLテーブルで使用していますが、境界線の一部が表示されない例がいくつかあります。

別のHTMLテーブルの同じページの同じCSSが正常に機能することは、私にとって意味がありません。また、Internet Explorerの同じページは、境界の観点からは問題なく見えます。

この例でわかるように、最初のテーブルの下部に境界線がありません。

enter image description here

なぜこれがここで起こるのか誰かが手掛かりを持っていますか？

htmlfirefoxhtml-tableborder
24
leora

多分あなたは少しズームイン/ズームアウトしました。これは、偶然または故意に発生する可能性があります Ctrl+スクロールホイール。ズームレベル0に完全にリセットされていない可能性があります。この誤ったレンダリング動作は、一部のWebサイト、ここSOでも認識できます。

これを修正するには、 Ctrl+ またはdoView>Zoom>Resetは、ズームレベルをデフォルトにリセットします。

これはFirefox/Geckoのバグ 410959 です。これは、border-collapse:collapse。それは2008年からであり、実際に進展はないため、おそらく回避策を見つける必要があります。 1つの方法はborder-collapse:separateおよびセルごとに境界線をいじる。

61
BalusC

作業中のアプリケーションのFirefoxでズームアウトすると、同様の問題が見つかりました。

主な原因はCSSの使用でしたborder-collapseプロパティをcollapseに設定します。

代わりにseparateに変更すると、問題が修正されました。ただし、テーブルのさまざまな部分に境界線を適用する方法を考え直す必要があったことを意味します。そうしないと、境界線の厚さが2倍に見えるからです。結局、jQueryを使用して、各tdの最後のthまたはtrと最後の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ユーザーにのみ適用しましたが、すべてのブラウザで機能する可能性があるため、テストしていません。

11
GregL

@GregLの良い答えに基づいて構築します（直接コメントすることができないようです）。JQueryを使用して「最後の」クラスを生成する代わりに、組み込みの疑似要素セレクター:first-childを使用しました。 tr:first-childとtd:first-childを定義するborder-topとborder-leftを選択するルールを作成しました（GregLの回答のようにborder-rightとborder-bottomの代わりに）。一般的なルールでは、border-rightおよびborder-bottomではなくborder-leftおよびborder-topを定義します。 :first-childは サポートされていると言われています Chrome v。4.0、Firefox v。3.0、IE 7.0、Safari v。3.1、およびOpera v。9.6（）。Firefox v。40.0.3でテストしましたが、最初にこの問題が発生しました。

2
Donald Payne

これは、テーブル（下の境界線が欠落している）がdiv内にあることが原因でした...境界線は明らかにテーブルの高さで計算されなかったため、境界線はありましたが表示されませんでした。

周囲のdivに1pxからマージンボトムを与えることで問題は解決しました。

1
Tom

border-spacing:0;これで問題が解決することを願っています。

1
Varun Arora

ブラウザのズームを大きくすると、境界線が欠落し始めました。次のようにして解決することができました。 ChromeおよびFirefoxでテスト済み。

padding: 0.5px !important
1
Jerome Anthony

テーブルの境界線が欠落するという問題も同じでした。私の解決策は：

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

そして、テーブル行の境界線：

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

Bootstrapレイアウトで使用しており、テーブルにもbootstrap "table table-striped table-bordered"）のようなcssクラスがあります =

私が解決策を試したとき、この解決策は私にとってうまくいきます

border-collapse: separate !important;

それは私には適切に機能しませんでした。

1
vanrado

答えの実現に役立った@Donald Payne

*（.table-bootstrap class）

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;
}
0
Дмитрий Сальников

これは少し正接ですが、Firefoxで行方不明の境界線を検索する人にとっては…

テーブル行（<tr>）の境界線の下に、特定のセルに背景が設定されている場所がありませんでした。これはセルの不正なposition: relativeが原因であることが判明し、それを削除（またはposition: inheritに変更）して修正しました。

Firefox 70.0.1

0
William Turrell