iphone - 如何去除移动 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 时会发生。浏览器想要显示该元素存在但没有任何内容，所以它用边框将其包裹起来。您可以通过在 HTML 中声明 img 的源来解决此问题。

试试这个 fiddle :http://jsfiddle.net/A2zAv/3/

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

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

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

参见 Strange border on IMG tag了解更多详情。