最近はhr自体あまり使うことがありませんが、いざ使うとなるとブラウザ毎の余白の解釈の違いに苦戦することに・・
以前メモしておかなかったことが悔やまれます。
なんとか記憶から掘り起こした指定が以下。
これでこちらの環境ではうまくいくようです。
・Google Chrome
・Firefox
・Safari
・IE6～11
2015年1月アーカイブ
要素をfloatさせると、高さに含まれなくなり上記のように親要素からはみ出てしまいます。
これを解決するには
・親要素に「overflow:hidden;」を指定する
・親要素にfloat解除のためのスタイルをまとめたclass（いわゆるclearfix）を当てる
の2つが一般的だと思います。
2つ目のclearfixはどこまでを対象ブラウザに含めるかによって内容が変わるのですが、
当社でテストしているブラウザに対応しているものは下記のようになります。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
上記で
・最新Google Chrome
・最新Firefox
・最新Safari
・IE6～11
に対応できます。
IE6、7の記述は必要に応じて。
