在Chrome中的圖像之間出現意外的線條

-2

在Firefox和Safari中，此頁面上的圖像緊密排列，但在Chrome中查看時，在圖像之間會顯示額外的像素。在Chrome中的圖像之間出現意外的線條

保留HTML h1標記，如果刪除了該錯誤並不總是會發生。

MAC OSX，鉻47：

a horizontal extra pixel row displays at 67% zoom

視窗10，鉻48：

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

的Android移動電話，任何Chrome

垂直和水平兩個額外的像素顯示爲100％，全部爲zo OMS

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>

來源

2016-01-24 user113235

上面的代碼看起來不錯，你可能有圖像的問題。 –

不，圖像很好。我剛剛使用Chrome瀏覽器在Android移動LG D851上檢查了該頁面。這是一個與Chrome渲染問題 – user113235

你可以張貼截圖並突出顯示問題？ –

只需添加垂直對齊將圖像

img { 
    vertical-align : middle; 
}

，它會解決你的問題

來源

2016-01-24 23:56:18 Soufiane

第二張圖片是在67％縮放比例的Chrome中看到的問題的屏幕截圖。 – user113235

'＃test-div img {display：block;餘量：0;填充：0;寬度：101％;高度：101％; }' – user113235

這工作擺脫了Chrome和Safari的臺式機和移動電話線路 – user113235

設置CSS 對象配合特性將幫助：

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

來源

2016-04-11 04:31:24 BucketPress

在Chrome中的圖像之間出現意外的線條

回答

相關問題