css - Chrome block element has strange border with windows DPI scaling -


when testing styling on different resolutions have encountered issue block elements on google chrome.

http://s3.postimg.org/n89fitzhv/chrome_bug.png

as can see in image there appears border rendering between elements. code used:

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <title></title>     <style>         .test ul li {             list-style:none;             display:inline-block;             width:200px;             background-color:#1d5b7f;             float:left;         }     </style> </head> <body>     <div id="container">         <nav class="test">             <ul>                 <li>test</li>                 <li>test</li>                 <li>test</li>                 <li>test</li>                         </ul>         </nav>     </div> </body> </html> 

i have found issue occur on google chrome , google chrome canary when windows 7 dpi scaling not in multiples of 100%. using 3840x2160 resolution monitor. issue visible when changed resolution down 1920x1080 if scaling not in multiples of 100%

i have not found issue occur on opera, safari, firefox or ie.

i'm tring find workaround this. have ideas or information relating this. thanks.

try style fix it:

-moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box; 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -