如何摆脱<img>标签中的默认轮廓？

<img class="image_cover" src = "" /> 

.image_cover { 
    width:25px; 
    height:25px; 
    border-style:none; 
    border: 0; 
    box-shadow:none; 
}

我展示它在这里提琴：jsfiddle 如何摆脱<img>标签中的默认轮廓？

在Chrome的版本33.0.1750.152，我看到过<img>标签的盒子（境）。我正试图摆脱它。

我跟着输入看过来：Removing the image border in Chrome/IE9，并设置border，border-style和box-shadow属性，但我仍然可以看到它周围的边框。

我该如何解决这个问题？

来源

2014-03-28 Louis93

边境有值 “无” 同时轮廓可设置为 “0” –

CSS

img { 
    Border: none; 
}

试试这个，它应该删除任何默认边框

来源

2014-03-28 15:16:41 Chris

不起作用。 http://jsfiddle.net/H4TNw/10/ – Louis93

@ Louis93它可以在SRC中放置图像时使用。这样可以防止出现在任何其他浏览器周围的任何边框img – Chris

铬automaticaly呈现一个边界img标签与空src属性。

解决方法是在此图像标记中放置透明png或gif。

来源

2014-03-28 15:19:11

这是因为你没有指定源。一旦你指定了一个SRC，这应该不再是一个问题。

来源

2014-03-28 15:19:35

由于您未将src属性设置为有效的图像url，所以显示了轮廓。

来源

2014-03-28 15:20:49 Bilal

摆脱轮廓是通过使其透明来完成的。

img{  
    border-color:transparent; 
}

来源

2014-03-28 15:23:08

此解决方案是否工作？ – Muhammed

与其他人一样，由于SRC为空，因此提及了边界。如果src不为空，则可以使用border:none更改边框。然而，这是因为<img>标签上没有src的默认浏览器行为，这就是为什么border:none不起作用的原因。

如果因任何原因，你想有一个空src时，您可以做到这一点。但我不知道你为什么会想一个图像标记没有SRC

<img class="image_cover" src="" /> 

.image_cover { 
    width:25px; 
    height:25px; 
    content: ""; 
}

DEMO：

http://jsfiddle.net/krishollenbeck/H4TNw/8/

来源

2014-03-28 15:29:14

不错的修复。这在重复问题上没有想到。 – andyb

如何摆脱<img>标签中的默认轮廓？

回答

相关问题