2015年1月アーカイブ

hrの余白

| コメント(0)
最近はhr自体あまり使うことがありませんが、いざ使うとなるとブラウザ毎の余白の解釈の違いに苦戦することに・・
以前メモしておかなかったことが悔やまれます。

なんとか記憶から掘り起こした指定が以下。
150121_oshi.gif

これでこちらの環境ではうまくいくようです。

・Google Chrome
・Firefox
・Safari
・IE6~11

clearfix当社用

| コメント(0)
150114_oshi_01.gif
要素を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の記述は必要に応じて。

このアーカイブについて

このページには、2015年1月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2013年8月です。

次のアーカイブは2015年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。