在移动设备上查看时 div 周围的边框答案

【问题标题】：Border around divs when viewing on mobile device在移动设备上查看时 div 周围的边框
【发布时间】：2014-01-09 20:06:04
【问题描述】：

我的网站主页即将完成，但是当我在移动设备上查看该页面时出现了小而明显的边框/轮廓。这不会发生在计算机上（我知道），因此您需要 iPhone/平板电脑/智能手机才能看到问题。 Link to website

我看到过这种性质的问题，我专门在云图像上尝试了负边距顶部 CSS，但无济于事。

Screenshot of the problem

一旦网页本身放大到足够大，这些线条就会消失，但当我看到它们时，它们开始让我恼火。

【问题讨论】：

标签： android html ios css

【解决方案1】：

在移动设备中查看时存在像素错误，导致您看到的线条非常小。这是因为您的“包装器”div 的背景是白色的。由于 'intro' div 位于此之上并且具有与网站背景相匹配的颜色，因此当出现一些像素错误时，'wrapper' div 的白色背景会显示出来。

我会尝试将包装器的顶部拆分为另一个子 div 并将其背景着色为白色，使整个包装器 div 没有背景颜色。

【讨论】：

我使用了你的技术，它有很大帮助，但是它仍然会在某些缩放百分比下影响页面。认为我通过使用 margin-bottom 作为某些 div 的负数来解决此问题。感谢您的帮助。

【解决方案2】：

我知道这篇文章有点老了，但是今天这个问题还没有任何好的解决方案。最好的解决方法是放置 -1px 边距和 1px 内边距，正如您从 chrome mobile 查看时在此代码笔上看到的那样：

https://codepen.io/bertri/pen/aaGmGW

<div style="background: white; font-size: 72px">First elem</div>
<div style="background: white; font-size: 72px">Has margin</div>
<div style="background: white; font-size: 72px; margin-top: -1px; padding-top: 1px">Hack to solve margin</div>

【讨论】：