我如何摆脱图像周围的边界？

Question

I can't find a source of problem. I want get rid of border around image.

Problem: http://codepen.io/anon/pen/xeFmt

Solution should be cross browser with support of IE8+.

Answer 1

Normally it would be:

  outline: none;
  border: none;

I suspect CodePen may be adding that so you can see the element or until you add a real src to the tag.

Answer 2

w3 says SRC is mandatory.

SRC (Source) The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the tag. SRC is mandatory.

Adding any value to the src (even a missing image) makes the border/outline disappear, without having to modify the css.

Example: http://codepen.io/anon/pen/eaJum

Answer 3

Normally it can be achieved by

border: none;
outline: 0;

But not for the case when actual image is missing, ie not loaded or src attribute is not specified

Answer 4

正如Romain Braun所建议的那样，将源代码添加到<img/>标签将删除边框。

<img src="http://9to5google.files.wordpress.com/2013/12/google2.jpg" />

Answer 5

Adding an image src="" attribute to it should remove the border but I would also add a border: none; to the CSS.