网页上某些缩放级别上的边框 [英] Borders on certain zoom levels on webpage

问题描述

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

Our corporate website is going through some weird shenanigans. It looks fine on any browser when you view it on a desktop pc or laptop. However, when you surf to the website on a mobile device you get these borders around the page elements both in Safari on iOS and Chrome and Android 2.2 Stock Browser in Android.

在研究问题时，我注意到边框也出现在台式机/笔记本电脑的Chrome上，但仅在某些缩放级别上显示:

While looking into the problem I've noticed that the borders also appear on Chrome on a desktop/laptop, but only at certain zoom levels:

100％缩放:

110％缩放:

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

Weird thing is, the lines aren't consistent throughout the different zoom levels:

以90％的缩放比例拍摄.

This is taken at 90% zoom.

因此，请澄清一下:通过放大笔记本电脑/台式机上的Google Chrome浏览器，我可以重现在移动设备上遇到的问题.但是，当我在移动设备上加载网站时，无论缩放级别如何，我总是能看到线条.

So to clarify: I can reproduce the problem I'm seeing on the mobile devices by zooming around in Google Chrome on a laptop/desktop. But when I load the website on a mobile device, I always see the lines, no matter what the zoom level is.

整个网站都通过表格进行布局(是的，我知道...它是Typo3中的模板，建立年代久远，尽管我们可以对其进行一些小的更改，但是重建整个模板是不可行的.但是我不认为这可能与表上的CSS规则有关，但似乎没有什么错.而且，如果这是CSS问题，在各种缩放级别上线条是否会不一致?这是模板的CSS文件: Pastebin

The entire website is given its lay-out through tables (Yes, I know... It was build ages ago as a template in Typo3 and though we can make small changes to it, rebuilding the entire template is not an option. But this aside.) so I thought it might have something to do with the CSS rules on the tables, but there doesn't seem to be anything wrong with that. And if it were a CSS problem, wouldn't the lines be consistent on the various zoom levels? This is the CSS file for the template: Pastebin

无论哪种方式，我们在不知道是什么原因导致的问题上都陷入了困境.如果有人遇到过这样的事情，那么对这个问题的任何启发将不胜感激.谢谢.

Either way, we're a bit stuck on this not knowing what's causing the issue. If anyone has ever encountered something like this, any enlightment on the issue would be appreciated. Thanks.

修改:刚刚在台式机上的IE，Firefox和Safari上对此进行了测试.无论缩放级别如何，那里都没有边界.

Just tested this on IE, Firefox and Safari on a desktop. No borders there, no matter what the zoom level is.

Edit2:根据网站的配色方案，放大至500％(台式机上为Chrome)可显示一些线条为蓝色，一些线条为白色，某些线条为灰色.它们的长度也不相等，并且当我在网页上滚动时似乎会改变位置(即，向左/向右移动一点).

Zooming to 500% (Chrome on a desktop) shows that some of the lines are blue, some are white and some are gray, according to the colour scheme of the website. They are also not equal in length and seem to change position when I scroll around the webpage (i.e: move a bit more to the left/right.)

推荐答案

这听起来与

This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")

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

The solution to that answer suggests you either:

• 禁用缩放(如果您设计为以该特定尺寸观看)
• 元素重叠1像素(例如，边距:-1像素)

过去，重叠修复对我有用，尽管使用基于表的布局可能会更困难.

The overlap fix has worked for me in the past, though this might be harder with a table-based layout.

这篇关于网页上某些缩放级别上的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！