web-dev-qa-db-ja.com

Firefoxで表に表示されない境界線、テーブルでの境界線の折りたたみ、位置：tbodyでの相対、またはセルでの背景色

次のHTMLを検討してください。

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

最後のセルには、インラインスタイルで左右の境界線があることに注意してください。あなた（または少なくとも私）は、これが見えることを期待するでしょう。 IEでは、これが当てはまります。しかし、Firefox（6）ではそうではありません。これを解決するには：

  • CSSのdiv.datagrid table tbodyの相対的な位置を削除する
  • CSSでdiv.datagrid table tbodyをdiv.datagrid tableに変更
  • CSSのbackground-color上のtable.data td.priceCellを削除する
  • CSSのborder-collapse上のdiv.datagrid tableを削除する

これは、コードの簡易バージョンです。また、（オプション2を選択して）解決しました。しかし、私が疑問に思っているのは：

  • これはFirefoxのバグですか？
  • これはIEのバグですか？

特に、CSSがそのままの状態でFirefoxが境界線を表示しない理由は何ですか？

cssfirefoxborder
71
Peter

これは私にはFirefoxのバグのように見えます。背景は境界線を塗りつぶしています。半透明の背景色を使用すると表示できます。

提出しました https://bugzilla.mozilla.org/show_bug.cgi?id=688556

58
Boris Zbarsky

この問題に出くわし、CSSのみの解決策に至りました：background-clip: padding-boxをtd要素に追加します。

詳細については、この記事を参照してください： https://developer.mozilla.org/en-US/docs/CSS/background-clip

156
medoingthings

すべてを1か所に置くだけです。

この問題は、折りたたまれた境界線を持つテーブル内に相対的な位置にセルがある場合に発生します（ボリスがバグを示して記入したように https://bugzilla.mozilla.org/show_bug.cgi?id=688556 =）

これは、user2342963（セルにbackground-clip：padding-boxを追加）で示されるように、CSSを使用して簡単に解決できます。

この問題（Firefoxを使用）と修正はこちらで確認できます： http://jsfiddle.net/ramiro_conductiva/XgeAS/

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
12
Ramiro Sánchez

これはfirefoxのバグであり、うまくいけばすぐに修正されるでしょう。しかし、その間にtdセルをposition: staticに設定することで、この問題を解決できました。うまくいけば、それは他の誰かを助けるでしょう。

td {
    position: static;
}
8
smitt04

別の可能な解決策は、テーブルマークアップのcolspanエラーを修正することです。

どうやら、colspanエラーは、border-collapseの使用時に非表示の境界線と同じ効果を引き起こす可能性があります。

http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html を介して適切なソリューションに導かれました。

私のテーブルでは、8列しかなかったときに<th colspan = "9">を書きました。

エラーの原因（非表示の右境界線）

  • Chrome 51.0.2704.103 m（64ビット）
  • Vivaldi 1.2.490.43（）（32ビット）

しかし、右の境界線でレンダリングされます

  • Firefox 44.0.2
  • IE 11（11.420.10586.0）
  • エッジ25.10586.0.0
2
pekaaw