罫線が表示されない

概要

　他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。

要因

　要因の代表例として以下があります。

1. 他ブラウザで独自のCSSが適応されている
   例えば、Chromeではブラウザ独自のCSSにて、hr要素にbackground-colorプロパティを指定することができます。
   そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。
   特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。

解決策

　要因の解決策の代表例として以下があります。

1. 他ブラウザで独自のCSSが適応されている
   Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。
   まず、表示させたい要素のインラインに罫線(border-top: thin solid;)を指定します。
   そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(background-colorプロパティを利用)にて非表示にします。

    

   　　インライン {
   	border-top: thin solid;
   　　}
   
   　　hr {
   	display: block;
   	height: 1px;
   	border: 0;
   	border-top: 1px solid #cccccc;
   	margin: 1em 0;
   	padding: 0;
   	background-color: rgb(255,255,255);
   　　}				

   上記の修正にて、他ブラウザとの互換がとれるようになります。

メリット

　・他のブラウザでも互換性を維持することができます。
　・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。

戻る