下のように、
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;
}