顯示的意外邊框：頁面放大時的表格單元格容器

我有一個奇怪的問題。當我在Chrome和Opera中放大頁面（使用Ctrl +）時，1 px頂部白色邊框顯示所有具有圖像背景的display:table-cell容器。顯示的意外邊框：頁面放大時的表格單元格容器

Firefox沒有這個問題。

嘗試在頁面的jsfiddle放大看問題。

100% - OK 
110 % - OK 
125% - white border 
150% - OK 
175% - white border

在移動電話中，即使在默認的100％縮放下，這些邊界也是可見的。

HTML：

<div class="dzn1"> 
    <div class="dzn2"> 
     <div class="dzn3"> 

    </div> 
    </div> 
    <div class="dzn2"> 
     <div class="dzn4"> 

    </div> 

    </div> 
     <div class="dzn2"> 
     <div class="dzn3"> 

    </div> 
    </div> 

     <div class="dzn2"> 
     <div class="dzn4"> 

    </div> 
    </div> 

</div>

的CSS：

.dzn1{display:table;width:300px;} 
.dzn2{display:table-row;} 
.dzn3{display:table-cell;width:100%;height:50px;vertical-align:middle; 
background-repeat:no-repeat;background-position:center;background-image:url('http://s8.postimg.org/vtwr7z6h1/brd1.jpg');} 
.dzn4{display:table-cell;width:100%;height:50px;vertical-align:middle; 
background-repeat:no-repeat;background-position:center;background-image:url('http://s8.postimg.org/5a465u5xh/brd2.jpg');}

圖片：

來源

2015-10-19 Gigante

搜索「舍入錯誤」並查看處理部分像素場景的解決方案。這裏有一個開始：http://ejohn.org/blog/sub-pixel-problems-in-css/ – isherwood

變化不重複你的背景圖像重複。縮放時的背景圖像計算爲「半像素高度」，瀏覽器輪轉或剪切，因爲不存在半像素之類的事物。

另一種可能性是將背景圖像的大小增加一個像素。

來源

2015-10-19 21:12:01 humer

我用紅色和藍色線條的示例僅用於stackoverflow目的來演示問題。我有一張平鋪的照片，無法增加尺寸。不重複不會解決問題 - 不同顏色的白色邊框將會解決問題，就這些了。至少現在我明白，這不是一個與CSS相關的問題。謝謝。 – Gigante

所以採取相反的做法 - 將css的高度降低一個像素 - 解決平鋪照片的問題。 – humer

我不知道是什麼原因造成的但是如果你添加邊框相同顏色作爲div圖像將隱藏空間：

https://jsfiddle.net/50a4gj9p/1/

.dzn3{display:table-cell;width:100%;height:50px;vertical-align:middle; 
background-repeat:no-repeat;background-position:center; border-color: red; border-style: solid; background-image:url('http://s8.postimg.org/vtwr7z6h1/brd1.jpg');} 
.dzn4{display:table-cell;width:100%;height:50px;vertical-align:middle; 
background-repeat:no-repeat;background-position:center; border-color: blue; border-style: solid; background-image:url('http://s8.postimg.org/5a465u5xh/brd2.jpg');}

來源

2015-10-19 21:07:01

顯示的意外邊框：頁面放大時的表格單元格容器

回答

相關問題