GeckoベースのブラウザーでCSSテーブルセルの境界線が消える
-
06-07-2019 - |
質問
Geckoのバグを明らかにしていると思われる非常に具体的なhtmlテーブルコンストラクトがあります。
これは、問題の蒸留バージョンです。 geckoベースのブラウザで次の表を確認します(FFなど):(これをコピーして新しいファイルに貼り付ける必要があります)
<style>
table.example{
border-collapse:collapse;
}
table.example td {
border:1px solid red;
}
</style>
<table class="example">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
<!> quot; 3 <!> quotの上に行がありません。右下のセルに-他のブラウザで表示すると、期待どおりに行が表示されます。興味深いことに、テーブルのtheadセクションを捨てて、得られるものを見てください:
<style>
table.example{
border-collapse:collapse;
}
table.example td {
border:1px solid red;
}
</style>
<table class="example">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
そうすることで動作します。誰もこれを見たことがありますか?回避策として、当面はtheadセクションを削除することになると思いますが、それによりテーブルがアクセスしにくくなります。
解決
奇妙な...間違いなく塗装のバグ。右クリックしてコンテキストメニューを表示し、行が存在する場所の一部を表示すると、コンテキストメニューを閉じると、その行が下に再描画されます。
編集:回避策-style="border-color: ...;"
に<td rowspan="3">
を配置すると、境界線を表示できますが、色は異なるにする必要があります。他の可能な限り。たとえば、テーブルが#ff0000の場合、#ff0001
他のヒント
iもこのバグを見つけましたが、私のPCではなく別のバグです。特定の解像度の後にブラウザウィンドウのサイズを変更すると、行が消えます。ウィンドウを最大化すると、すべてがポップバックします。 border-collapse:separateを設定することにより、これを永久に修正できます。これにより、各セルの各穴に独自の幅が与えられます。やりたいことではありませんが、うまくいきます。
これは、border-collapse:collapseを使用することによっても発生します。次に、整列境界線を1px、次に0pxに設定します。境界線を折りたたむため、1pxの幅よりも0pxを優先するようです。
いずれにせよ、Firefoxのみであり、Firefoxから離れるもう1つの理由です。