ちょっと覚え書き。

IE6やIE7はz-indexの解釈が他ブラウザと異なり、同一階層間での重ね順の前後を指定するもので、 グローバルに前後を指定するものではない形みたいです。

なので各階層で後に書かれたものが上のレイヤーにのり、 深い階層でどんなにz-indexを操作しても、 その要素を含む浅い階層でz-index指定されていなければ、思いどおりの表示にはできないようです。

角丸など画像を1つ1つ作成するのが、あまり効率的でないので僕は、javascript「DD_roundies」で角丸を表示することが多いです。
ただIE8でCSSで背景画像を利用している箇所で1pxずれたり、IE9にどうも対応していないようで別の方法を少し調べてみました。

「IE-CSS3」が便利かつ簡単に利用できそうです。
以下、覚え書きです。

■手順2
ダウンロードしたファイルを好きな場所に配置します。
なんとなくcssフォルダに配置しました。

■手順3
CSSの最後にbehaviorプロパティを使い読み込みます。

behavior: url(ie-css3.htc);

▼5pxの角丸ボックスを作成する場合のCSS記述例

.sample {

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(ie-css3.htc); 
	}

.-moz-border-radiousはfirefox用の記述、-webkit-border-radiusはsafariとchrome用の記述です。また「IE-CSS3」でサポートしているプロパティは border-radius（角丸） box-shadow（ボックスシャドウ） text-shadow（テキストシャドウ） の3つになります。

正常に動作しない場合ですが、
behaviorのURLを相対パスで指定していると動作しないケースがあるそうです。絶対パスで指定しておきましょう。
サーバーによってはhtcファイルを認識しない場合があるそうです。

僕の場合は、IE8で角丸を指定した箇所の背景色が無効になる症状が発生しました。
調べてみると、どうやら後ろに隠れてしまっているようです。角丸のブロックのスタイルに下記を追加すると改善されました。

position:relative;
z-index:1;

参考にさせていただいたサイト
hislab様
ダリの雑記：WEBプログラム版様

そんな時は、【SyntaxHighlighter】を利用するとブログの記事でソースコードのを紹介する際に、キレイに分かりやすく表示すること出来ます。

ソースを別ウィンドウで表示したり、印刷やクリップボードへの保存も可能です。多くの方が利用されているので、一度は目にしたことがあるかと思います。

▼こんな感じでhead部分に記述を追加します。

<script type="text/javascript" src="/blog/scripts/shCore.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushXml.js"></script>
<link href="/blog/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/blog/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/blog/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

あとIE6だけマージンが２倍になってしまうバグは、「display:inline;」で解決します。

画像の透過度をjQueryで操作することで、ロールオーバー的な表現が可能かなと思い検索したところ、「Fine×3」さんのサイトで分かりやすく紹介されていました。

方法は、特定のファイル名がついた画像をhoverイベントでマウスオーバー時とマウスアウト時の透過度を変更する形です。

以下、覚え書きです。

$(function() {
	var images = $("img");
	for(var i=0; i < images.size(); i++) {
		if(images.eq(i).attr("src").match("_btn.")) {
			$("img").eq(i).hover(function() {
				$(this).css('opacity', '0.6');
			}, function() {
				$(this).css('opacity', '1');
			});
		}
	}
});

マウスオーバー時は画像の透過度を60％にし、マウスアウト時は透過度を100％に戻しています。

関連サイト
Fine×3さん記事 「画像1枚でロールオーバー」