网页上某些缩放级别的边框

Question

我们的公司网站正在经历一些奇怪的恶作剧。当您在台式机或笔记本电脑上查看时，它在任何浏览器上看起来都很好。但是，当您在移动设备上浏览网站时，您可以在iOS上的Safari和Android中的Android和Android 2.2 Stock浏览器中获取这些边框。

在调查问题时，我注意到桌面/笔记本电脑上的边框也出现在Chrome上，但仅限于某些缩放级别：

100％缩放：

110％缩放：

奇怪的是，在不同的缩放级别中，线条不一致：

这是以90％变焦拍摄的。

所以要澄清一下：我可以通过在笔记本电脑/台式机上的谷歌浏览器中放大来重现我在移动设备上看到的问题。但是当我在移动设备上加载网站时，无论缩放级别如何，我总能看到线条。

整个网站都通过表格进行布局（是的，我知道......很久以前它是作为Typo3中的模板构建的，虽然我们可以对其进行细微更改，但重建整个模板不是一种选择但是除此之外。）所以我认为它可能与表格上的CSS规则有关，但似乎没有任何问题。如果它是一个CSS问题，那么各种缩放级别的线条是否一致？这是模板的CSS文件：Pastebin

无论哪种方式，我们都有点坚持这一点，不知道是什么导致了这个问题。如果有人遇到过这样的事情，那么对此问题的任何启发都将不胜感激。感谢。

修改 刚刚在桌面上的IE，Firefox和Safari上进行了测试。无论缩放级别如何，都没有边框。

EDIT2： 根据网站的配色方案，缩放到500％（桌面上的Chrome）显示有些线条是蓝色的，有些是白色的，有些是灰色的。当我滚动网页时，它们的长度也不相等，似乎改变了位置（即：向左/右移动一点。）

Answer 1

这听起来类似于space/gaps between divs on website when viewed on iPhone/iPad（“在iPad上，当网站以100％以下的比例观看时，有时会出现一些人工制品。其中一个特别明显：div之间有一条像素线，就像在您的网站，在菜单“）

下

该答案的解决方案建议您：

• 禁用缩放（如果您已设计为以特定尺寸查看）
• 元素上有1px重叠（例如margin：-1px）

重叠修复过去对我有用，但基于表格的布局可能会更难。