各ブラウザのhrタグに関する注意点
2022-01-16 17:37:21
一般にはほとんど目にすることのない人事ですが、ひとたび目にすれば、生死を左右することもあります。ここでは、写真を添付する代わりに、参考までに列挙しておこう。
<テーブル
通常ブラウザ
IE6、7
ファイアフォックス
実際の高さ
高さ + 右の枠線幅 + 左の枠線幅
高さ
高さ
背景色
背景色
background+color(height<2pxの時、高さをグレーの突起で表示、色を設定する必要がある、テキストと同じ)
背景色
hr{
height:1px;
*height:3px; color:#f60;/* for ie6 ie7 */;
background-color:#f60;
border:1px solid #07f;
}
@-moz-document url-prefix(){ hr{height:3px;}} /* for firefox */
他にもっと手間のかからない解決策はないのでしょうか?
例えば、実際の高さが3px、4辺が1px、ボーダーカラーが#07f、それ以外が#f60の仕切りを作りたい場合、以下のようなイメージになる。
コピーコード
コードは以下の通りです。
hr{
height:1px;
*height:3px; color:#f60;/* for ie6 ie7 */;
background-color:#f60;
border:1px solid #07f;
}
@-moz-document url-prefix(){ hr{height:3px;}} /* for firefox */
他にもっと手間のかからない解決策はないのでしょうか?
関連
-
html+css 充電水滴の融合効果コード
-
HTMlページにおけるトップページへの戻り方のいくつかの実装のまとめ
-
HTMLの外部参照CSSファイルが有効にならない理由分析・解決方法
-
10設計と大規模なWebサイトのアーキテクチャの生産は、問題を考慮する必要があります
-
スパンの高さの下限を決めるという解決策は、何の効果もない
-
HTML+CSS の相対幅と絶対幅が競合する場合、div ソリューションの場合
-
IEがクラッシュする不具合
-
テーブルの枠線/セルの区切り線を非表示にする方法
-
HTMLのセマンティクスと関連するフロントエンドフレームワークの詳細分析
-
HTMLにおける絶対パスと相対パスの違いの解析
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン