Question

在我看来，我用下面的方式调用我的图标：

<td>
 <i id="sthAdd" class="icn_plus"></i>
</td>

，班级是：

.icn_plus {
  background: url(../images/icons/plus-14x14.png) no-repeat;
  width: 20px;
  height: 20px !important;
  cursor: pointer;
  border: none;
  padding-left: 20px !important;
}

它在Chrome和IE8中工作，但在IE7中没有。我已尝试分隔网址和背景重复，请先删除网址＆＃34; /＆＃34;，但它无法再次使用。

奇怪的观点是同时和相同的观点，这是有效的：

<td>
  <input value=" " class="btn_left" />
</td>

和班级是：

.btn_left { 
  background: url(../images/campaign/Ok1.png) no-repeat;    
  width: 20px;  
  height: 30px; 
  border: none; 
  cursor: pointer;
  outline: none;
}

我缺少什么？提前谢谢。

Answer 1

<i>是内联标记。试试：

.icn_plus {
    display: block;
    // or
    display: inline-block;
    background: url(../images/icons/plus-14x14.png) no-repeat;
    width: 20px;
    height: 20px !important;
    cursor: pointer;
    border: none;
    padding-left: 20px !important;
}

Answer 2

谢谢大家，

我通过更改用法解决了这个问题：

<td>
    <a class="btn" id="sthAdd">
         <img src="../icons/plus-14x14.png" />
    </a>
</td>

IE7中不显示图标

2 个答案: