显示的意外边框：页面放大时的表格单元格容器

我有一个奇怪的问题。当我在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

显示的意外边框：页面放大时的表格单元格容器

回答

相关问题