chromeのデベロッパーツールで「Responsive」表示にすると、<li>要素の下に細い線ができる。
下のように、
chromeのデベロッパーツールで「Responsive」表示にすると、li要素の下に細い線ができます。
どうしたらなおりますか?
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link href="styles.css" rel="stylesheet" media="all">
</head>
<body>
<ul>
<li><a href="#"><img src="flower_100.jpg" alt=""></a></li>
<li><a href="#"><img src="flower_100.jpg" alt=""></a></li>
<li><a href="#"><img src="flower_100.jpg" alt=""></a></li>
</ul>
</body>
</html>
[CSS]
*{
margin:0;
padding:0;
}
body{
background: red;
}
ul{
background: green;
width: 600px;
}
li{
background: yellow;
border-bottom:0px solid red;
}
a{
background: blue;
}