1

我在 :after 元素上创建了一个带有阴影的页脚，方法是使用带有 png 格式的正确文件的背景图像。图像高 20 像素，宽 5 像素，从黑色（底部）变为透明（顶部）。

它在所有设备上都可见且正常工作，但在三星 Galaxy s3 上创建阴影的顶部边框上可见 1px 粗的灰线。当我按下屏幕一秒钟并且缩放图形上的抗锯齿消失时，它消失了。正常点击后它又回来了。

看起来在重绘和重新缩放所有图形之后，渲染引擎正在离开那条线。有没有人遇到过这样的问题？

这是设备运行应用程序的屏幕截图的一部分。 http://i.imgur.com/eMglrfr.png

我将欣赏所有可能的解决方案。谢谢

4

1 回答 1

2

如果有人遇到过这样的问题，看起来也可能出现在 HTC Desire HD 上，也可能出现在其他设备上，这就是我设法解决的方法。

我将背景位置向上移动了 1 像素，并将阴影位置向下移动了 1 像素（从底部 100% 到顶部：-19 像素）。使用这些设置，背景图像被从顶部切割 1px，并且没有额外呈现“自动”边框。

footer:after {
    background: url("../img/shadowup.png") repeat-x scroll 0 -1px rgba(0, 0, 0, 0);
    top:-19px;
    content: "";
    height:20px;
    width:100%;
    left: 0;
    position: absolute;
}
于 2013-10-04T08:18:50.593 回答