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

Posted 2023-03-12

【中文标题】网页上某些缩放级别的边框

【英文标题】：Borders on certain zoom levels on webpage

【发布时间】：2013-01-15 10:25:27

【问题描述】：

我们的公司网站正在经历一些奇怪的恶作剧。当您在台式电脑或笔记本电脑上查看它时，它在任何浏览器上看起来都很好。但是，当您在移动设备上浏览网站时，您会在 ios 上的 Safari 和 android 上的 Chrome 和 Android 2.2 Stock Browser 中的页面元素周围看到这些边框。

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

100% 缩放：

110% 缩放：

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

这是以 90% 的缩放比例拍摄的。

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

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

无论哪种方式，我们都有点卡在这个问题上，不知道是什么原因造成的。如果有人遇到过这样的事情，我们将不胜感激。谢谢。

编辑： 刚刚在桌面上的 IE、Firefox 和 Safari 上进行了测试。无论缩放级别是多少，那里都没有边框。

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

【问题讨论】：

你能提供你的 CSS

添加为 pastebin 链接。

使用元视口禁用缩放功能

@darryn.ten 为什么要禁用缩放功能？此外，我什至不必在移动设备上放大即可看到线条，它们始终存在。

但是你说的是不同缩放级别的问题......而且，表格很糟糕，我可以

【参考方案1】：

这听起来类似于space/gaps between divs on website when viewed on iPhone/iPad（“在 iPad 上，当以低于 100% 的比例查看网站时，有时会出现一些伪像。其中一个特别明显：div 之间的 1 像素线，就像在您的网站上一样, 在菜单下")

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

禁用缩放（如果您设计用于以该特定尺寸查看） 元素有 1px 的重叠（例如边距：-1px）

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

【讨论】：

听起来很像，但不确定是不是这样。放大到 500% 显示有些线条是蓝色的，有些是白色的，有些是灰色的。它们的长度也不相等，并且当我在网页上滚动时似乎会改变位置。

啊哈，我想到的“线条”只是背景颜色显示出来的情况，实际上是元素超出了 1px。 Webkit 曾经在缩放时遇到百分比宽度问题（但你的是用 px 定义的，对吗？），有时也会在悬停时产生 1px 的间隙（通过添加 position:relative to TDs 来修复）。除此之外，我被难住了！

好的，感谢您的建议。一旦我再次访问 CSS，我将尝试一下。

某些浏览器上的伪像！感谢您的澄清。