互換モードではhr要素に指定したclearプロパティが無視される
症状
互換モードではhr要素にclearプロパティを指定しても無視されてしまい、フロートの横に回り込んでしまう。
例示
<div style="float:left; width:100px; height:20px; background:blue; margin:1px;"></div> <hr style="clear:both;"> <div style="float:left; width:100px; height:20px; background:red; margin:1px;"></div>
hr要素がフロートの横に回りこまないようにclearプロパティを設定しています。なお、このページは互換モードで表示させています。
スクリーンショット
WinIE6.0での表示(互換モード)
Moz1.0.1での表示(互換モード)
補足
-
hr要素に対して
display: block;
を指定することでこのバグを回避できます。ただし、この指定のためにWinIEで別のバグが発生することがあります。<div style="float:left; width:100px; height:20px; background:blue; margin:1px;"></div> <hr style="clear:both; display:block;"> <div style="float:left; width:100px; height:20px; background:red; margin:1px;"></div>
-
Bugzilla-jpの関連項目です。
-
互換モードでhr要素はインライン要素として扱われているのでclearプロパティの指定は無効になります。一方、標準モードでhr要素はブロック要素として扱われます。以下の理由からこのような違いが設定されているそうです。
- WinIEやNN4.xなどではhr要素をブロック要素として扱っている。また、hr要素の罫線はボーダーである。
- フロートの後にclearプロパティがnone値のブロック要素があるとき、この要素のボーダーはフロートが存在しないものと考えて設置しなければならない。
- しかし、慣習としてhr要素の罫線(=ボーダー)はフロートを避けるように表示されてきた。hr要素がブロック要素であるのなら、このような振る舞いはCSS2の規定に違反していることになる。
- このため実験として、互換モードではhr要素をインライン要素にした。インライン要素であれば罫線がフロートを避けるのはCSS2に準拠した振る舞いになる。
このような経緯から、互換モードではhr要素に対して以下のようなスタイルがデフォルトで設定されています(「resource:///res/quirk.css」から抜粋)。これにより互換モードでhr要素は、前後に(br要素相当の)改行が置かれたインライン要素として扱われます。
hr { display: inline; -moz-box-sizing: border-box; margin: 0 0.1% 0 0.1%; /* Mmm! Hack-on-a-hack for bug 81776 */ font-size: -moz-initial !important; } hr:before { white-space: pre; content: "\A"; } hr:after { white-space: pre; content: "\A"; }
詳しくはMozilla.org Bugzilla Bug 18754を参照してください。
修正状況
Moz1.0.1/1.2.1の互換モードで不具合の発生が確認されました。標準モードではclearプロパティの指定どおりに表示します。
関連記事
- visibility:hidden;を指定した要素に:hoverが効かない
- 固定レイアウト表で%値指定の列幅が本来の幅より小さくなる
- ul, ol要素以外でリストマーカーの数値がすべて0になる
- 固定レイアウト表で%値指定の列幅が100%を超えられない
- 親要素のマージン幅によってはclearが効かない
- リストアイテム要素内でフロートのclearが効かない
- インラインテーブルの行グループ要素や行要素でスタイル指定を無視される
- padding-box, border-boxでbottom, rightの算出が正しくない
- 特定のスクリプトを実行するとhr要素が点滅する
- 子にブロックレベル要素を含むins, del要素もインライン要素になる
- 印刷時、ボックス左端にfirst-letter擬似要素の幅と同じ幅の隙間が空く
- 内容物が空白から始まるリストアイテムの画像リストマーカーが消える
- overflow:auto/scroll;を指定した要素内で閲覧領域の外にあるリンクが機能しない
- 等幅フォントで表示した文字列の末尾が欠ける
- overflowへの対応が不完全な要素
- アンカーの要素にcursor:auto;を指定するとI字カーソルが割り当てられる
- 表要素では%値指定のleft、topプロパティが無視される
- インライン要素に挟まれているフロートが下にずれて置かれる
- overflowでスクロールバーが出るときの高さ計算が正しくない
- collapse状態の表罫線がtable要素の幅を超えて表示される
- アンカーを:hover状態にするとbody要素などのサイズが変化する
- hr要素のボーダーが正しく設定されない
- 折り返しを抑制した要素内にあるhr要素の幅が正しく算出されない
- 相対配置要素がボックスサイズを算出する際に子孫フロートを除外しない
- テーブルがはみ出しても横スクロールバーが表示されない
- :hover状態で配置を行うと当該要素と周囲のレイアウトが大きく乱れる
- title属性を指定したstyle要素がスタイルシート切り替えの対象になる
- 改ページ直後の行にtext-indentプロパティが効いてしまう
- :first-letter擬似要素に設定したスタイルが動的擬似クラスにマッチすることで失われる
- :first-letter擬似要素に右マージンが効かない
- 左フロートに回り込んだファイル選択コントロールの高さが変化する
- 通常配置以外で配置された要素に後続する要素の上マージンが無視される
- line-heightの値によってはマージンが指定どおりの値にならない
- ボールド体の文字列が前後の文字列と重なる
- 優先シートのdisplay:none;が代替シートにも引き継がれる
- label要素でdisplayプロパティが無視される
- 固定配置したボックスが印刷されない
- letter-spacingを指定した要素内で「ー」と直後の文字とが重なる
- インライン要素への折り返し禁止指定が当該要素の外のブロックに作用する
- 固定配置されたリストアイテム要素内で文字間隔を変えると要素全体が動く
- 固定配置されたボックスの幅が文字サイズ変更に対応しない
- 存在しない画像をリストマーカーに指定するとリストマーカーが完全に消える
- 閲覧領域のサイズを初期コンテナブロックのサイズとして扱う
- 親要素をはみ出すように配置した要素内のリンクやフォームが機能しない
- フロート配置要素の子要素を絶対配置にすると親要素を無視した配置になる
- フォントによってvertical-alignプロパティを用いたときの表示位置が異なる
- 両端揃えした要素内で「ー」と直後の文字が重なる
- 外部スタイルシートで2バイト文字が無視される
- テーブル内にあるlabel要素内の文字列が消える
- overflow:auto;を使用した要素内のページ内リンクが効かない
- スタイルシート切り替え機能を用いても文字色が切り替わらない
- li要素を相対配置するとリストマーカーが消える
- スクリプトでiframeを参照すると履歴が余分に追加される
- フォーム関連要素のフォントサイズを%値で指定するとボックスサイズが不安定になる
- フォーム関連要素のsize属性とサイズ関連スタイルの適用優先順位が不正
スポンサーリンク