タグ: css

NetScape7.1でbackground-position :0 bottom;に配置した背景が出ない

忘れがちなのでメモ
背景をボックスの下部に配置しようとして、下記のようなCSS書くこともあると思うんだけど、
なんでかNetscape7.1でbackground-position: 0 bottom;がダメみたい。
対応策は、0をなくして記述。忘れるなよオレ。

■Netscape7.1でうまくレンダリングしてくれない例

■対応策

構造のマークアップなしでフロートをクリアする方法(clearfix)

前のエントリーでクリアツールについて、書いたんですが、別の方法もあります。
構造のマークアップなしでフロートをクリアする方法
思い出してみれば、Movable Typeの3.2のデフォルトcssを見て、なんだろーなーとは思ってたw
探したら、その当時から解説してた方もいらっしゃいますね。しかもわかりやすい!
最近はIE7も気になるのですが、やっぱり同じような記事もありました。
clearfixハック
【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
これまた以前のエントリーで紹介したYahoo! UI Library Grids cssこのページのQuick Links:の Download:からパッケージをダウンロードしてみるとわかるのだが、build/grids/grids.cssにも似たような記述の部分もある。
しかし、clearfixもホーリーハック使ってあるし、grid.cssもdivを入れ子にしないと、マージン/パディングは無理そうだしな。
んー要は使いどころですかね。
css3では、もっと簡単になったり、便利になったりしないかなー。

Yahoo! UI Library

これもg氏に教えてもらったネタ。
知ってる人は知っている、Yahoo! User Interface Library
その中で、YUI Library CSS Toolsは下記の通り。
Reset css
Fonts css
Grids css
Grids cssについての日本語の解説は、phpspot開発日誌 Yahoo!が提供するレイアウト用CSSライブラリがわかりやすかった。
Yahoo! UI Library Grids CSSを使ってページレイアウトこのページも凄くわかりやすい。

クリアツール作って使おうか

これは、Mac IEで、 clearを設定した要素の子要素では同じ方向のfloatが効かない(5.x)というバグがあるためです。
直前のフロートをクリアしたいボックスの中(子要素)でもフロートさせたい時は当然ある訳でして。そんな時に、クリアするためのツールを作って、フロートをクリアしたいボックスの次に入れてます。
以前は、brでクリアツールを作ってましたが、最近では、divの中にhrだけあるクリアツール使ってます。
これ、g氏に教えてもらった。これはCSSを切った状態でも線で仕切られて自然な場合も多いためです。
このツールのCSS
/*
clear tool
*/
.clear{
clear:both;
height:0;
visibility:hidden;
}
hr {
display:none;
}

widthを記載したボックスには、左右のボーダーとパディングは避けよう

これには、色んな理由があります。
ひとつは、古いブラウザのボックスモデルの解釈が違うため。 次に、Win IEでの 左右ボーダーとパディングを設置した要素に後続する部分がずれる(5.5/6.0)とか。
CSS3になると、ボックスサイズの算出時にボーダーまでを含めるらしいので、最近ではあまりハックを使ってない。ボックスモデルを含めたハックは最終手段と考えています。