ipad和iphone safari上的div的单/子像素不alignment

我有以下的情况,我需要一些帮助…

  1. 两个div,大小相同,位置相同,一个在另一个之上
  2. 一切在桌面浏览器上按预期工作
  3. 在iphone / ipad上,div边框周围出现一条淡淡的线条
  4. 这条微弱的线不总是在四个边界上。 它根据divs的位置而变化。 它看起来是由于两个div不正确排队的结果,但根据他们的风格设置,它们具有相同的大小和位置。

你可以在这里看到结果: http : //www.thoughtartistry.com

有任何想法吗?

我在最近的一个项目中遇到了类似的问题,那就是我使用不同背景颜色的背景图像蒙版来为移动版Safari中的图标着色。 问题是,当页面被Safari缩小的时候,图像周围出现了一行背景色,尽pipe它应该被遮罩。 我从来没有find一种方法来防止页面缩小时漏出背景颜色。 移动Safari的algorithm显然是错误的,重新计算背景和掩码。 我find了一个解决方法:我把元素的轮廓放在与元素的父元素背景相同的颜色上。 轮廓在元素之外,因此掩盖了渗出的部分。 如果你的元素的父元素的图案背景是激烈的,这将不会很好,但如果它是一个纯色,它会做得很好。

负余量是我发现阻止这种情况的唯一方法。

例如,如果在2个div之间有一个微弱的水平间距,则向第二个div添加-1px的顶部边距将使其略微重叠,并且在缩放页面时间隙不会再次出现。

有些情况(如图像精灵或重复模式)可能需要稍微调整一些,但总的想法是一样的。 对于精灵来说,确保在裁剪边界的1个像素内没有大的颜色变化。 出血不超过1像素,所以1像素的调整就足够了。

问题不仅在于div匹配在一起,而且还有图像精灵。

我遵循这个build议初始视口缩放到1.0的build议。 子像素错误消失了,但随后我在其他设备(如Android)上testing了我的网站,并且意识到全尺寸页面很烦人,因为用户在每次加载时都必须重新缩放。 所以我宁愿停用这个规模,等到苹果修复它。 然后有一天,我想如何解决页面的边缘问题,我来到了这个简单的解决scheme:

 html { min-width: 1024px; } 

具有这种分辨率的设备(例如水平放置的iPad)将把文档比例设置为1.0。 在我的情况下,这是足够的解决scheme,因为我可以显示页面正常工作,子像素错误是在Safari / iOS,这将在未来有希望解决。

这完全取决于一个人的情况,但在我们的情况下,我们使用这个线程或一个盒子阴影所提出的负利润率,因为outline只适用于所有的边界,也就是说。 outline-bottom不存在。

 /* * Prevent faint lines between elements. * @link http://stackoverflow.com/questions/5832869 */ box-shadow: 0 1px 0 red; 

有任何想法吗?

如果你只是想要点子,我有几个。 如果你要求解决scheme,我不相信有一个解决scheme。

我看到与我的网站相同的东西。 放大时问题就消失了。我相信这只是Mobile Safari渲染缩小的div和图像的一个问题,我真的不相信我们能做些什么。

假设您的网站/devise宽度为900像素。 你在第一行的第一行有一个900像素的宽度,在第二行的三个像素之间,每个宽度为300像素。 在台式电脑上以100%的比例缩放,一切看起来都很完美。 但是,对于iOS,该网站缩小到320像素宽。 900 px div被缩小了64.44%。 现在,当您将每个300 px div的比例调整为64.44%时,您将分别得到106.68 px。 你不能有一个像素的一小部分,所以假设他们四舍五入到107像素。 其中三个div连续共有321个像素; 或者比它们上面的更大的div多1个像素。

我的解释是一个粗略的过分简单化,因为即使在你还没有达到1到1个像素的关系时,放大似乎也能减less或消除这个问题。 我会假设,无论iOSalgorithm是否正在纠正舍入错误,当整体图像更接近实际大小(更加放大)时,只要做得更好。


编辑:

我看到900像素宽的div(自动高度)包含一个Y-重复背景切片900像素宽高于另一个包含900像素宽背景图像的div(固定高度)的问题。 我对四舍五入错误的解释似乎并没有直接解释这个观察,尽pipe我仍然相信iOS的缩放algorithm是怪罪。

我还通过使用overflow-x:hidden解决了iOS子像素间隙问题(在全屏网站上) 停止旁路滚动和视点缩放停止音高缩放。 我也有持有人的宽度设置为101%。 和所有元素/图像divs里面设置为float:left ;. 这意味着子像素间隙全部位于左侧,但是通过设置在101%宽度的保持器div推出。

我会尝试玩元/视口选项,具体设置初始缩放到1.0和禁用用户缩放。

http://developer.apple.com/library/safari/ipad/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

删除“明确:两者”(如果有)从差距下面的div。

我也必须解决这个问题。 如果您正在使用Div来定义部分。

 //background.css .background-color { background-color: blue; } .background-color div { background-color: inherit; }