Question

我有一个页面，其中包含一个带有渐变的空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但这当然不是问题（它不是真正的边框，只是一个视觉“功能”）。

所以删除它的唯一方法是添加纯文本。我想我可以添加一个点并用颜色隐藏它但是它会打破我的小心脏来做出如此难看的修复。

请帮忙！

珍妮

Answer 1

在您的index.php中插入<head>区域中的此代码，以避免iOS的错误缩放解释造成的伪影：

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

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

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

我希望这对你也有帮助！

空div在iPad / iPhone（Safari）浏览器中获得虚构边框

1 个答案: