我有一个仅在 Google Chrome 中出现的 CSS 问题。设置为的对象overflow: hidden
在水平居中的容器内被“剪裁”在边缘,并且仅在奇数浏览器宽度下,并且仅在高分辨率显示器上。
HTML:
<html><body>
<div id="container">
<div class="sprite"> </div>
</div>
</body></html>
CSS:
#container
{
margin: 0 auto;
max-width: 800px;
-webkit-transform: translate3d(0px,0px,0px);
}
.sprite
{
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
background-image: url("/img/sprite@2x.png");
background-position: 0 0;
background-repeat: no-repeat;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
}
现在,当我调整窗口的宽度时,在奇怪的窗口宽度处,精灵会在我的视网膜显示屏上的任一侧被剪裁。它不会出现在标准(1 个 css 像素到 1 个显示像素)显示器上。
在 Safari 或 Firefox 中不会出现这种明显的渲染错误。这是在运行 Chrome 35 的 OS X 10.9.3 上。
编辑:它也发生在纯 CSS 圆形中,因此似乎与使用背景图像无关。