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
Post a Comment