Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法
Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからない。要するにFirefoxのバグのようですね。
なので、↑のようにその消えるborder部分が現れた時は、その消えた部分のthやtdに直接borderを記述したりして対処していましたが、ちょっと驚き?の解決法を発見したので、ご紹介します。もしかしたら基本的な、普通の事かもしれませんが。。
解決方法!
さて。その解決法はこれです。
例として 行2 × 列3 くらいの簡単なTableを書きます。
(見やすいように、padding等、設定してます。)
Firefox | 消えるborder | 対策 |
---|---|---|
なんで消えるの? | それは | バグです。。 |
<table class="FireFox_BorderTest"> <tr> <th>Firefox</th> <th>消えるborder</th> <th>対策</th> </tr> <tr> <td>なんで消えるの?</td> <td>それは</td> <td>バグです。。</td> </tr> </table>
↑どう見えてるでしょう?大丈夫の時もありますが、たまにやっぱり見えません。。
今もFirefoxでチェックしたら左と下が消えてます。なんでやねん。。
そう言う時は、このhtmlに下記のcssを追加すると、
.FireFox_BorderTest{/*tableの背景を黒にします。これがborderの色になります。*/ background-color:#000000; border-collapse:separate; border-spacing:1px; } .FireFox_BorderTest tr td {/*tdの背景を白にします*/ padding: 5px 20px; background-color: #fff; }
このように、1pxのボーダーが完璧に消える事なく書く事ができます。
Tableの背景を黒に、tdの背景を白にする事で、
1pxのborder(solid、色は黒)を表示させる、いう設定をしたわけですね。
Firefox | 消えるborder | 対策 |
---|---|---|
なんで消えるの? | それは | バグです。。 |
どうです?簡単でしょ?これ発見した時は久しぶりに感動しました。
でも難点もあります。これ、solid以外のborderには使えないんです。原理が分かれば普通に考えて無理ですよね。
なので、solid以外に設定したい時は、その設定したい部分に、直接borderの設定してくださいね!!
Google AdS
関連記事
-
MySQL 5.5→5.7への移行手順:XSERVER(エックスサーバー)にて
数年ぶりに新規でワードプレスを使用したサイトを作ったのですが、MySQLのバージョン、5.7しか新規では追加できないよう…
-
はてなブックマーク(はてぶ)でブックマークしたURLを、まとめて変更する方法!
ドメインの変更をすると、301リダイレクトで対策をしたとしても(詳細はこちら)やはり今まで稼いできた被リンクも一緒に変更…
-
ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す
今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回…
-
サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)
現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…
-
onMouseOver、onMouseOutで、簡単に画像を切り替える
今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…
Comment
抜いて形だす技法ですよねー(/・ω・)/
佐々さん
ですね!
発見したときはこういう発想がなかったので、
ちょっと感動したのを覚えてますw