圖標.ico擴展不會顯示在IE或Chrome

Question

我有用於添加和刪除的gridview按鈕我用CSS來顯示每個圖標。它工作在Firefox罰款，但iccons沒有在IE中顯示或Chrome這裏是我的CSS代碼

.delete { 
    display: inline; 
    background: url('delete.ico') no-repeat; 
    border: none !important; 
    background-position: -0px -0px; 
    width: 20px; 
    height: 20px; 
    float: none; 
    } 

.edit { 
    display: inline; 
    background: url('edit.ico') no-repeat; 
    border: none !important; 
    background-position: -0px -0px; 
    width: 20px; 
    height: 20px; 
    float: none; 
} 

[編輯] 這裏是HTML按鈕

  <asp:TemplateField> 
       <ItemTemplate> 
        <asp:Button ID="BtnDelete" runat="server" CssClass="delete" CommandName="Removal" OnCommand="BtnDelete_Command" CommandArgument='<%# DataBinder.Eval(Container,"RowIndex")+";"+Eval("code")+";"+Eval("name") %>' OnClientClick="return not_check1();" /> 
       </ItemTemplate> 
      </asp:TemplateField> 

      <asp:TemplateField> 
       <ItemTemplate> 
        <asp:Button ID="BtnEdit" runat="server" CommandName="Edit" Text="" CssClass="edit" OnCommand="BtnEdit_Command" CommandArgument='<%# DataBinder.Eval(Container,"RowIndex")+";"+Eval("code") %>' /> 
       </ItemTemplate> 
      </asp:TemplateField> 

Answer 1

相反顯示：一致;，嘗試使用display：inline-block;請記住，您無法將高度設置爲內嵌元素。

Answer 2

.ico僅支持所有瀏覽器中的圖標。 改爲使用png，gif或jpg。 或至少一個後備版本：

.delete { 
    display: inline; 
    background: url('delete.png') no-repeat; /*fallback*/ 
    background: url('delete.ico') no-repeat; 
    border: none !important; 
    background-position: -0px -0px; 
    width: 20px; 
    height: 20px; 
    float: none; 
    } 

.edit { 
    display: inline; 
    background: url('edit.png') no-repeat; /* fallback */ 
    background: url('edit.ico') no-repeat; 
    border: none !important; 
    background-position: -0px -0px; 
    width: 20px; 
    height: 20px; 
    float: none; 
}