html - Unexpected lines showing between images in Chrome -


in firefox , safari, images on page align tightly, viewed in chrome pixels display between images.

retain html h1 tag, if removed bug not happen.

mac osx, chrome 47:

a horizontal pixel row displays @ 67% zoom

windows 10, chrome 48:

both vertical , horizontal pixels show @ 100% , zooms

android mobile phones, chrome

both vertical , horizontal pixels show @ 100% , zooms

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>

just add vertical-align images

img {   vertical-align : middle; }

and solve problem


Comments

Post a Comment