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の設定してくださいね！！
- ◀PREV
前の記事
- CSSスプライトで、スムーズに画像を切り替える
- NEXT▶
次の記事
- opacityの書き方 クロスブラウザ
関連記事
-
-
URLの正規化：wwwあり、なしのドメインを統一する記述方法（エックスサーバー(XSERVER) にて）
前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…
-
-
画像やテキストを中央（上下左右真ん中）に配置する方法
普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…
-
-
複数の横に並ぶブロック要素をセンタリングさせる！！
よく複数の画像をfloatで並べることありますよね？でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…
-
-
z-index が効かない時の対処方法
z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…
-
-
日付を自動更新で表示させる！ 簡単コピペ！！
先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか？』という依頼がありました。 とって…
-
-
サーバー移転の手順 その2：データベースの移行（phpMyAdminを使って）
前回サーバ移転の手順 その1：サーバーからサーバーへの移行（同サーバー(EXTREM)同士）からの続きです！ って…
-
-
スマホ、携帯からタップ（クリック）で電話を発信する、htmlの記述方法 コピペでOK!!
スマホ等のタブレット、また携帯で、電話番号をタップ（クリック）して直接かけるhtmlの記述方法です。 …
-
-
301リダイレクトでサイトのリニューアル（ドメインを変更）する！：.htaccessの記述、設定方法、順序etc.
最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー（エク…
-
-
[http] から [https] へ。常時SSL化対応：ワードプレス、エックスサーバー環境にて
今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…
-
-
WordPress：プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法
前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外（勿論自分のものもOK!）の気…
Comment
抜いて形だす技法ですよねー(/･ω･)/
佐々さん
ですね！
発見したときはこういう発想がなかったので、
ちょっと感動したのを覚えてますw