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

Question

在桌面 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); 
}

Answer 1

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

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

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

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

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

有关更多详细信息，请参阅IMG 标签上的奇怪边框。