chromeのデベロッパーツールで「Responsive」表示にすると、<li>要素の下に細い線ができる。


下のように、  
chromeのデベロッパーツールで「Responsive」表示にすると、li要素の下に細い線ができます。

どうしたらなおりますか？

[![画像の説明をここに入力](https://i.stack.imgur.com/Hq2dK.png)](https://i.stack.imgur.com/Hq2dK.png)

[HTML]

[code]

    <!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>
    
[/code]

[CSS]

[code]

    *{
        margin:0;
        padding:0;
    }
    
    body{
        background: red;
    }
    
    ul{
        background: green;
        width: 600px;
    }
    
    li{
        background: yellow;
        border-bottom:0px solid red;
    }
    
    a{
        background: blue;
    }
    
[/code]




`img { vertical-align: bottom; }`を追加してみてください。

