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

Question

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

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时，会发生这种奇怪的问题。浏览器想要显示该元素存在但没有任何内容，因此它用边框包装它。您可以通过在HTML中声明img的来源来解决此问题。

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

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

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

作为另一种选择，如果您绝对想要使用img标签，可以在图片的src中插入1px xpp透明间隔gif。

有关详细信息，请参阅Strange border on IMG tag。