今回も基礎知識の復習です。
今更ながら、IEチェックで発見したCSSプロパティと対応策を記述します。正直、めっちゃくちゃ簡単な対応です。CSS初心者の方のみ参考にして下さい。

擬似クラス「last-child」がIE8では効かないとな？

縦型のナビゲーションメニューをCSSでレイアウトする際、ナビゲーションメニューの下に一本線を引いて、メニューっぽくするレイアウトです。

	<ul>
		<li><a href="">▶ナビゲーション1</a></li>
		<li><a href="">▶ナビゲーション2</a></li>
		<li><a href="">▶ナビゲーション3</a></li>
		<li><a href="">▶ナビゲーション4</a></li>
		<li><a href="">▶ナビゲーション5</a></li>		
	</ul>

ul{
	width: 200px;
	border:1px solid #001efb;
	padding:20px;
}

li{
	list-style: none;
	border-bottom: 1px dashed #ff0000;
	margin-bottom: 10px;
}	

li:last-child{
	border-bottom: none;	
}
li a{
	text-decoration: none;
}

一応、サンプル
IE8では、「last-child」を理解してくれないので、「ナビゲーション5」の「border-bottom」もキッチリ表示してくれます(・∀・)

同じ擬似クラスでも「first-child」は理解してくれるIE8

なので、対応策は至って簡単！！「border-top」にして、「first-child」を記述して「ナビゲーション5」の「border-top」を非表示にすればいいんですね(・∀・)

ul{
	width: 200px;
	border:1px solid #001efb;
	padding:20px;
}

li{
	list-style: none;
	border-top: 1px dashed #ff0000;
	padding-top: 10px;
}	

li:first-child{
	border-top: none;	
	padding-top: 0px;
}
li a{
	text-decoration: none;
}

はい、これで完了です。
一応、サンプル

その他、IE8が解ってくれない擬似クラス

【参考サイト様m(_ _)m】
Internet Explorer 8を最低限のブラウザとした場合に使ってはいけないCSSや注意を要するCSSのまとめ

• nth-child
• nth-last-child
• nth-of-type
• nth-last-of-type
• last-child
• first-of-type
• last-of-type
• only-child
• only-of-type

微妙に、理解してくれたり、してくれなかったり・・・ホント気ままなやつですね。IEは。

まとめ

今回の問題は「コレが無理なら、じゃぁコレで」とあっさり解決出来る内容でした。IE8を対応させるという名目で今回のようなレイアウトを組むなら、
「last-child」より「first-child」を使えばいいだけですからね(・∀・)
来年(2014年)の4月にXPのサービスサポートが終了すれば、IE8のユーザーも減ってくれるので、少しは悩みのタネも減ってくれるかなと淡い期待を持ちながら、本日はこの辺で。以上、＠Kc_fujiでしたm(_ _)m