Question

在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

＆＃13;

<!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>

＆＃13;

Answer 1

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

即可

img {
  vertical-align : middle;
}

它将解决您的问题

Chrome中的图像之间显示意外的线条

1 个答案: