border:none不使用背景处理图像集

Question

K所以我在我的html中有一个图像,我使用css设置它的src background: url(),原因是因为我想在点击时切换类,以便在图像之间来回切换.一切都有效,除了我的图像有边框这一事实,我所做的一切似乎都摆脱了愚蠢的事情.

这是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; border:0; border-width: 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指定(强调我的):

SRC属性指定要嵌入的图像的URI.其语法与标记的HREF属性相同.SRC是强制性的.

设置CSS background-image与设置...的srcHTML属性不同<img>,也许这就是你的问题.您应该考虑使用不同的元素,例如: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>