WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)えっ??CSSの「last-child;」ってIE8で効かないの??(CSS覚え書き)

css_last-child_top
こんにちわ、CSS復習中の@Kc_fujiです。今回も基礎知識の復習です。
今更ながら、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

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ