图标 .ico 扩展名不显示在 IE 或 Chrome 中答案

【问题标题】：Icon .ico extention doesn't display in IE or Chrome图标 .ico 扩展名不显示在 IE 或 Chrome 中
【发布时间】：2015-05-06 18:43:21
【问题描述】：

我有用于添加和删除的 gridview 按钮，我使用 css 来显示每个按钮。它在 Firefox 中运行良好，但 IE 或 Chrome 中不显示 iccons 这是我的 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>

【问题讨论】：

只是一个符号。你不需要把 -0px -0px，你可以使用 0 0 代替。
你也可以显示一些html吗？

标签： html css internet-explorer google-chrome firefox

【解决方案1】：

代替 display: inline;，尝试使用 display: inline-block; 请记住，您不能将高度设置为 inline元素。

【讨论】：

【解决方案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;
}

【讨论】：