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

Question

I have a page containing an empty div with a gradient in it, like this: 我有一个页面，其中包含一个带有渐变的空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;
}

This looks brilliant in FF, IE, Chrome and Safari ... on a computer. 在计算机上的FF，IE，Chrome和Safari中，这看起来很棒。 When checked in Safari on an iPad or iPhone, I get a tiny border around the div. 当在iPad或iPhone上的Safari中进行检查时，div周围有一个细小的边框。 This is removed if I write text in the box or if I zoom in a lot but not if I write a non-breaking white space. 如果我在框中写文本或放大很多，但如果我写不间断的空格，则不会删除。 I have even tried putting in a transparent pixel with but it made no difference to the imaginary border. 我什至尝试用放置透明像素，但对虚构边界没有影响。 Also tried setting border=0 but this was of course not the problem (it is not a real border, just a visual "feature"). 还尝试设置border = 0，但这当然不是问题（这不是真正的边界，只是视觉上的“特征”）。

So the only thing that removes it is to add pure text. 因此，删除它的唯一方法是添加纯文本。 I guess I can add a dot and hide it with color or so but it would break my little heart to make such an ugly fix. 我想我可以添加一个点并用颜色将其隐藏起来，但是这样做会伤到我的小心脏。

Please help! 请帮忙！

Jenny 珍妮

Answer 1

Insert in your index.php this code in the <head> -area to avoid artifacts from bad zoom interpretation of iOS: 在<head> -area中将此代码插入您的index.php中，以避免iOS的错误缩放解释造成的伪像：

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

Then go to your css-file and insert a 1px negative margin, to avoid this. 然后转到您的css文件并插入1px负边距，以避免出现这种情况。 In my website this was the footer div: 在我的网站上，这是页脚div：

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

I hope this will help you, too! 希望对您有帮助！

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

问题描述

1 个解决方案

解决方案1
3 2011-11-01 10:32:02

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

问题描述

1 个解决方案

解决方案1 3 2011-11-01 10:32:02

解决方案1
3 2011-11-01 10:32:02