楽しいおかず修正：IE対策！(IE9だけ。。)

授業メモ

前の記事のコードを、IE9で見たらレイアウトがめちゃくちゃ崩れていて、修正しました。
http://web-study.lolipop.jp/kadai/css/side_dish/

ポイント

IEの場合、画像リンクにborderがついてしまい崩れる。
なのでcssに下記のコードを追加しました。

img {border: none;}

あと、ナビの位置なども変更しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しいおかず♪</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<section class="left"><!-- col1▼ -->
<figure class="box">
<h1 class="left"><img src="images/01.png" alt=""></h1>
</figure>

<nav class="box">
<ul>
<li class="left"><!-- concept：左上 -->
<a href="#">
<img src="images/02.png" alt="" class="m-r">
</a></li>

<li><!-- access：右上 -->
<a href="#">
<img src="images/04.png" alt="" class="m-b">
</a></li>

<li class="left"><!-- menu：左下 -->
<a href="#">
<img src="images/03.png" alt="" class="m-r">
</a></li>

<li><!-- news：右下 -->
<a href="#">
<img src="images/05.png" alt="">
</a></li>
</ul>
</nav>

<figure class="box">
<img src="images/11.jpg" alt="">
</figure>

<figure class="box">
<p class="left"><img src="images/12.jpg" alt="" class="m-r"></p>
<p><img src="images/13.jpg" alt="" class="m-b"></p>
<p><img src="images/14.jpg" alt=""></p>
</figure>

<figure class="box">
<p class="left"><img src="images/15.jpg" alt="" class="m-b"></p>
<p class="left"><img src="images/16.jpg" alt="" class="m-r"></p>
<p class="left"><img src="images/17.jpg" alt=""></p>
</figure>
</section>

<section class="left"><!-- col2▼ -->
<figure class="box">
<p class="left"><img src="images/07.jpg" alt="" class="m-b"></p>
<figure class="box">
<p class="left"><img src="images/08.jpg" alt="" class="m-r"></p>
<p class="left"><img src="images/09.jpg" alt=""></p>
</figure>
</figure>

<figure class="box">
<p><img src="images/18.jpg" alt=""></p>
</figure>

<figure class="box">
<p class="right"><img src="images/21.jpg" alt=""></p><!-- right!! -->
<p><img src="images/19.jpg" alt="" class="m-b"></p>
<p><img src="images/20.jpg" alt="" class="left"></p>

</figure>

<figure class="box">
<p><img src="images/22.jpg" alt=""></p>
</figure>

<figure class="box">
<p class="left"><img src="images/23.jpg" alt="" class="m-b"></p>
<p class="right"><img src="images/24.jpg" alt=""></p>
<p><img src="images/25.jpg" alt=""></p>
</figure>
</section>

<section class="left"><!-- col3▼ -->
<figure class="box">
<p class="left"><img src="images/10.jpg" alt=""></p>
</figure>

<figure class="box">
<p><img src="images/06.jpg" alt="" class="right"></p>
<p class="left"><img src="images/26.jpg" alt="" class="m-b"></p>
<p><img src="images/27.jpg" alt="" class="left"></p>
</figure>

<figure class="box">
<p class="left"><img src="images/28.jpg" alt="" class="m-r"></p>
<p><img src="images/34.jpg" alt="" class="m-b"></p>
<p><img src="images/35.jpg" alt="" class="left"></p>
</figure>

<figure class="box">
<p class="left"><img src="images/33.jpg" alt="" class="m-r" ></p>
<p><img src="images/29.jpg" alt="" class="m-b"></p>
<p  class="left"><img src="images/30.jpg" alt="" class="m-r"></p>
<p><img src="images/31.jpg" alt=""></p>
</figure>

<figure class="box">
<p><img src="images/32.jpg" alt=""></p>
</figure>
</section>
</div>
</body>
</html>

@charset "UTF-8";

* {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
}
#container {
	width: 960px;
	margin: 20px auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
.box {
	width: 300px;
	height: 300px;
	padding: 0 20px 20px 0;
}
.m-r {
	margin-right: 20px;
}
.m-b {
	margin-bottom: 14px;
}
img {
	border: none;
}