空 div 在 iPad/iPhone (Safari) 浏览器中获得假想边框答案

【问题标题】：Empty div gets imaginary border in iPad/iPhone (Safari) browser空 div 在 iPad/iPhone (Safari) 浏览器中获得假想边框
【发布时间】：2011-09-09 18:10:55
【问题描述】：

我有一个页面，其中包含一个带有渐变的空 div，如下所示：

<div class="prodGradientArea"></div>

.prodGradientArea {
    background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
    display: inline-block;
    float: left;
    height: 10px;
    width: 420px;
}

这在 FF、IE、Chrome 和 Safari 中看起来很棒......在计算机上。在 iPad 或 iPhone 上的 Safari 中检查时，div 周围有一个小边框。如果我在框中写文本或放大很多，但如果我写一个不间断的空白，则不会删除。我什至尝试过放入一个透明像素，但它对想象中的边框没有任何影响。还尝试设置border=0，但这当然不是问题（它不是真正的边框，只是一个视觉“特征”）。

因此，唯一删除它的就是添加纯文本。我想我可以添加一个点并用颜色隐藏它，但如果做出如此丑陋的修复会伤透我的心。

请帮忙！

珍妮

【问题讨论】：

我认为你没有包含足够的代码。例如，那个 CSS 只包含 -moz-linear-gradient，WebKit 变体在哪里？问题的jsFiddle demo 会很有用。
可以是大纲吗？尝试设置大纲：0；在你的 CSS 中。我并不是说这是一个答案，因为我从未使用过 iPad，但它的默认值可能是 1px？我想值得一试！

标签： iphone css ipad html

【解决方案1】：

在你的 index.php 中插入 <head>-area 中的这段代码，以避免因 iOS 的不良缩放解释造成的伪影：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

然后转到您的 css 文件并插入 1px 负边距，以避免这种情况。在我的网站中，这是页脚 div：

.unten {
    margin-top: -1px;
}

我希望这对你也有帮助！

【讨论】：