楽しいおかず IE6,7,8,9対策版

CSS課題

◎fatwebstudyさんのご要望
IE対策を、短いコードで書いたらどうなるんですか？の疑問に答えてみました。

短いってのをテーマにすると、ちょっと難しそうでしたがなんとかなりました。
細かなズレはキャプチャで見る分はなかったです（MacなのでIE【IEtester含め】のDLができないんです）。

  • HTMLの構造を大幅に変更　sectionが少ない分見やすく、対策用のclass追加もなし。
  • CSSは14命令で完了。　対策すると3命令増えました。

http://felica.boy.jp/tanosiiokazu2/

  • HTML
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>楽しいおかずレイアウト</title>
<link rel="stylesheet" href="style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>

<body>
	<article>
		<section>
			<header>
				<h1>
					<img src="image/logo.png" alt="">
				</h1>
				<nav>
					<ul>
						<li><img src="image/nav01.png" alt=""></li>
						<li><img src="image/nav02.png" alt=""></li>
					</ul>
					<ul>
						<li><img src="image/nav03.png" alt=""></li>
						<li><img src="image/nav04.png" alt=""></li>
					</ul>
				</nav>
			</header>
			<figure><img src="image/11-1.jpg" alt=""></figure>
			<figure><img src="image/5-1.jpg" alt=""></figure>
			<figure><img src="image/5-2.jpg" alt=""></figure>
			<figure><img src="image/5-3.jpg" alt=""></figure>
			<figure><img src="image/8-1.jpg" alt=""></figure>
			<figure><img src="image/8-2.jpg" alt=""></figure>
			<figure><img src="image/8-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/1-1.jpg" alt=""></figure>
			<figure><img src="image/1-2.jpg" alt=""></figure>
			<figure><img src="image/1-3.jpg" alt=""></figure>
			<figure><img src="image/3-1.jpg" alt=""></figure>
			<figure><img class="right" src="image/12-3.jpg" alt=""></figure>
			<figure><img src="image/12-1.jpg" alt=""></figure>
			<figure><img src="image/12-2.jpg" alt=""></figure>
			<figure><img src="image/6-1.jpg" alt=""></figure>
			<figure><img src="image/9-1.jpg" alt=""></figure>
			<figure><img src="image/9-2.jpg" alt=""></figure>
			<figure><img src="image/9-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/2-1.jpg" alt=""></figure>
			<figure><img class="right" src="image/4-3.jpg" alt=""></figure>
			<figure><img src="image/4-1.jpg" alt=""></figure>
			<figure><img src="image/4-2.jpg" alt=""></figure>
			<figure><img src="image/13-1.jpg" alt=""></figure>
			<figure><img src="image/13-2.jpg" alt=""></figure>
			<figure><img src="image/13-3.jpg" alt=""></figure>
			<figure><img src="image/7-1.jpg" alt=""></figure>
			<figure><img src="image/7-2.jpg" alt=""></figure>
			<figure><img src="image/7-3.jpg" alt=""></figure>
			<figure><img src="image/7-4.jpg" alt=""></figure>
			<figure><img src="image/10-1.jpg" alt=""></figure>
		</section>
	</article>
</body>

</html>

@charset "UTF-8";
* {
	list-style-type: none;
}
h1,ul,article,header,section,nav,figure {
	display: block;
	margin: 0;
	padding: 0;
}
article {
	width: 960px;
	margin: 10px auto;
	overflow: hidden;
}
section {
	width: 320px;
	float: left;
}
ul {
	height: 160px;
}
li {
	float: left;
}
img {
	margin: 10px;
	float: left;
}
.right {
	float: right;
}

URLを入れてIEのキャプチャが見れるサービス

楽しいおかずのはずが、IEのせいで全然楽しくなかったです。