html - 图标在 IE7 中不显示

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 中无效。我试过将 url 和背景重复分开，通过删除第一个“/”来更改 url，但它不再起作用。

奇怪的是在同一时间和同一 View ，这是有效的:

<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;
}