如何在移动 webkit 上删除图像周围的白色边框？答案

【问题标题】：How to remove white border around image on mobile webkit?如何在移动 webkit 上删除图像周围的白色边框？
【发布时间】：2013-03-14 20:00:35
【问题描述】：

在桌面 Webkit 上，我的图像可以正常显示，没有任何问题。在移动 Webkit（例如 iPad iOS 5）上查看时，会出现明显的白色边框。我使用 background-image 和 background-size 是因为我的元素具有固定的比例，但图像源本身可以是任意比例。

JSFiddle：

http://jsfiddle.net/tokyotech/A2zAv/

HTML：

<img />

CSS：

body {
    background: #666; }

img {
    width: 8em;
    height: 8em;
    display: block;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1),
        0 1px 0 rgba(0,0,0,0.5) inset;
    background-size: cover;    
    border-radius: 0.4em;
    background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg); 
}

【问题讨论】：

您使用background-image 属性作为<img> 标签的正常src="" 属性是否有任何真正的原因？
我在桌面上的 JS Fiddle 中看到相同的白色边框。
@Blieque 所以我可以用background-size:cover裁剪图像

标签： iphone css ipad webkit mobile-webkit

【解决方案1】：

当您未指定img src 时，会出现这个奇怪的问题。浏览器想要显示元素存在但没有任何内容，所以它用边框包裹它。您可以通过在 HTML 中声明 img 的源来解决此问题。

试试这个小提琴：http://jsfiddle.net/A2zAv/3/

如果您不想声明 img src，请不要为您的图片使用 img 元素。您可以使用 div 来解决这个渲染问题。这将允许您根据需要将图像 contain 到容器中。

http://jsfiddle.net/A2zAv/4/

如果您绝对想使用img 标签，您可以在图像的 src 中插入一个 1px x 1px 透明间隔 gif。

更多详情请见Strange border on IMG tag。

【讨论】：

很好的解决方案。我是一个 <img> 标签，在语义上是正确的。如果我使用<div>，其他人在查看我的代码时不会知道它应该包含一个图像，而无需与 CSS 进行交叉检查。
很公平。我认为拥有src-less img 标签与在这种情况下使用 div 一样没有语义，但对每个人来说都是如此。或者，我认为this fiddle 可能是您最语义化的解决方案......尽管它可能会导致两次加载图像。基本上，我用填充将图像推到视野之外，背景图像显示在它后面。阅读 HTML 的人仍然可以抓取图像，并且您已经获得了不错的浏览器后备。
嗨，我有一个疑问。我正在尝试两个像素的解决方案（修改了 gif），因为在我的项目中，其他解决方案是不可能的。当我用白色在 gif 周围增加 2 个像素时，两个按钮之间会出现一条奇怪的条纹。在其他按钮中出现像素。如果您需要图片，请打开答案或其他问题。你能帮我吗？我的网页只显示在 ipad 中。对不起我的英语:-)
大家好，我发布了这个问题。谢谢。 stackoverflow.com/questions/19420006/…