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仅支持所有浏览器中的favicon。请改用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;
}

图标.ico扩展程序无法在IE或Chrome中显示

2 个答案: