Chrome 中的图像之间出现意外的线条答案

【问题标题】：Unexpected lines showing between images in ChromeChrome 中的图像之间出现意外的线条
【发布时间】：2016-06-07 05:46:41
【问题描述】：

在 Firefox 和 Safari 中，此页面上的图像紧密对齐，但在 Chrome 中查看时，图像之间会显示额外的像素。

保留 HTML h1 标记，如果将其删除，错误并不总是发生。

MAC OSX、Chrome 47：

a horizontal extra pixel row displays at 67% zoom

Windows 10、Chrome 48：

both vertical and horizontal extra pixels show at 100% and all zooms

Android 手机，任何 Chrome

垂直和水平额外像素均以 100% 和所有缩放显示

HTML

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Chrome Bug Test</title>
  <style type="text/css">
    #test-div img {
      float: left;
      display: block;
    }
  </style>
</head>

<body>

  <h1>Chrome Bug Test</h1>

  <div id="test-div" style="width:720px !important; height=540px !important; overflow:hidden;">
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png" />
    <img src="slice-div-test.png">
  </div>

</body>

</html>

【问题讨论】：

上面的代码看起来不错，可能是图片有问题。
不，图像很好。我刚刚使用 Chrome 仔细检查了 Android 手机 LG D851 上的页面。是Chrome渲染的问题
你能发截图并突出问题吗？

标签： html css google-chrome

【解决方案1】：

只需将vertical-align添加到您的图片中

img {
  vertical-align : middle;
}

它会解决你的问题

【讨论】：

第二张图片是在 Chrome 中以 67% 的缩放比例显示的问题的屏幕截图。
#test-div img { display:block; margin:0; padding:0; width:101%; height:101%; }
这有助于消除桌面和移动版 Chrome 和 Safari 中的线条

【解决方案2】：

设置 css object-fit 属性会有所帮助：

img {
    object-fit:cover; //use contain if you do want it to 'fill up' the parent, but either value will solve your issue.
}

【讨论】：