html - 边框 :none not working on an image set using background

Question

K 所以我的 html 中有一个图像，我正在使用 css 和 background: url() 设置它的 src 这样做的原因是因为我想在点击时切换类，这样我在图像之间来回移动。一切正常，除了我的图片有边框，而且我所做的一切似乎都无法摆脱这个愚蠢的东西。

这是 html:

<img class="minus" />

这是CSS:

.minus{
  position: relative;
  margin: 0 0 -3px 5px;
  float:right;
  background: url(/images/mobile/minus.png) no-repeat;
  border: none;
  display:block;
  width: 16px;
  height: 16px;
}

我已经尝试了所有我能想到的border:0px;边界:0；边框宽度:0px； border-style:none; 基本上我可以在这里或网络上找到的任何东西都无法摆脱愚蠢的边框。任何见解将不胜感激。

编辑:使用谷歌浏览器。

Answer 1

我当然能够在 Chrome 中重现此错误。这是一个演示:

.minus{
  display: block;
  margin: 0 0 -3px 5px;
  background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
  width: 100px;
  height: 100px;
}

<img class="minus">

然而，w3.org指定(强调我的):

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.

设置 CSS background-image与设置 src 不同<img> 的 HTML 属性...也许那是你的问题。您应该考虑使用不同的元素，例如:a <span> :

.minus {
  display: block;
  margin: 0 0 -3px 5px;
  background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');  
  width: 100px;
  height: 100px;  
}

<span class="minus"></span>