3

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

JSF中：

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); 
}

在此处输入图像描述

4

1 回答 1

5

这是一个奇怪的问题，当您不指定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。

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

于 2013-03-14T20:15:01.583 回答