我有以下情况,我需要一些帮助...
您可以在此处查看结果:http://www.thoughtartistry.com
有什么想法吗?
答案 0 :(得分:21)
我在最近的一个项目中遇到了类似的问题,我在其中使用了具有不同背景颜色的背景图像蒙版来为移动Safari中的结果图标着色。问题是当页面被Safari按比例缩小时,图像周围会出现一条背景颜色,即使它应该被屏蔽。当页面缩小时,我从未找到防止背景颜色泄漏的方法。在移动Safari的算法中,重新计算背景和掩码显然是错误的。我确实找到了一个解决方法:我在元素上添加了一个轮廓,其颜色与元素父元素的背景颜色相同。轮廓位于元素之外,因此掩盖部分渗出。如果你的元素的父元素具有激烈的图案背景,那么效果不会很好,但如果它是纯色的话,它就会很好。
答案 1 :(得分:5)
负边距是我发现阻止这种情况的唯一方法。
例如,如果2个div之间有一个微弱的水平间隙,则向第二个div添加-1px的上边距将使其略微重叠,并且在页面缩放时间隙不会再出现。
某些情况(如图像精灵或重复模式)可能需要稍微调整一下,但总的想法是一样的。对于精灵,请确保裁剪边框的1个像素内没有大的颜色变化。出血量不超过1个像素,因此1像素的调整就足够了。
答案 2 :(得分:3)
问题不仅在于div匹配在一起,还与图像精灵有关。
我遵循了将初始视口比例设置为1.0的建议。子像素错误消失了,但后来我在其他设备(如Android)上测试了我的网站,并意识到全尺寸页面很烦人,因为用户每次加载都必须重新缩放。所以我更喜欢禁用比例并等到Apple修复它。然后有一天我在思考如何用页面的边距解决问题,我在CSS中找到了这个简单的解决方案:
html {
min-width: 1024px;
}
具有此分辨率的设备(例如iPad处于水平位置)会将文档比例设置为1.0。在我的情况下,这是足够的解决方案,因为我可以显示页面正常工作,并且子像素错误在Safari / iOS中,这将在未来有希望解决。
答案 3 :(得分:2)
这完全取决于某种情况,但在我们的情况下,我们使用此线程建议的负边距或框阴影,因为outline
仅适用于所有边界,即。 outline-bottom
不存在。
/*
* Prevent faint lines between elements.
* @link http://stackoverflow.com/questions/5832869
*/
box-shadow: 0 1px 0 red;
答案 4 :(得分:1)
我还使用overflow-x:hidden解决了iOS子像素间隙问题(在全屏网站上);停止横向滚动&视点比例停止音高变焦。我也有持有者divs设置宽度:101%;并且所有元素/图像div都设置为float:left;。这意味着子像素间隙全部位于左侧位置,但被设置为101%宽度的支架div推出视野。
答案 5 :(得分:0)
我尝试使用meta / viewport选项,特别是将初始比例设置为1.0并禁用用户缩放。
答案 6 :(得分:0)
从差距之下的div中删除“clear:both”(如果有)。
答案 7 :(得分:0)
我也必须解决这个问题。如果您仅使用Div来定义部分。
//background.css
.background-color {
background-color: blue;
}
.background-color div {
background-color: inherit;
}