ひろぽっぽれす

firefox

div {}

opera

html:first-child div {}

safari

html* div {}

Ie6

*html div {}

Ie7

*+html div {}

※全部個別に指定してあげないとズレるかもしれない。

.clearfix {
	zoom:1;/*for IE 5.5-7*/
}
.clearfix:after {/*for modern browser*/
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

僕が作ってるwordpress用のmixiっぽいテンプレートですが、最後のバグ取り（Safariでカレンダーのボーダーが正しく表示されない）が完了しました。

safariって、Web標準に一番近い挙動で動くブラウザですが、これが結構対応がわかんなかった。

厳格なのか何なのかわかんないんですが、tableのwidthが178pxなのに、captionのwidthが180pxになっていたので、caption分がtableの枠からはみ出して、 右ボーダーを正しく表示できてなかったようです。サイズ揃えたら、いとも簡単に表示されたお（´ω`）

そんな、最新版のmixi風wordpressテンプレートのダウンロードはこちら

ひろぽっぽれすのデザインをちょっちいじりました。ヘッダー部分をもちっといじっていこうと思います。

こんちゃす。海外のCSSデザインを見ていたら、text-indent: -9999px; とは違う画像置換方法を見つけました。（既出かも）

旧式では、CSS側で、text-indent: -9999px; などと指定して、テキストを飛ばして、バックグラウンドに画像を指定する下記のようなテクニックを使います。

text-indent: -9999px を使ったテクニック

(X)HTML側

<div><a href="#"><span>テキスト</span></a></div>

---

CSS側

div a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(images/bg_off.gif) no-repeat 0 0;
	text-indent: -9999px; /*ここでテキストを飛ばす*/
}
div a:hover {
	background: url(images/bg_on.gif) no-repeat 0 0;
}

しかし、これでは、キーボードでのタブ移動の際に選択がわかりにくくなって、アクセシビリティ的によくないとのことから、display: none; を使った画像置換テクニックもあります。

display: none; を使った画像置換テクニック

(X)HTML側

<div><a href="#"><span>テキスト</span></a></div>

---

CSS側

div a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(images/bg_off.gif) no-repeat 0 0;
}
div a:hover {
	background: url(images/bg_on.gif) no-repeat 0 0;
}
div span {
	display: none; /*テキストを表示させない。*/
}