Question

在搜索按钮上，我创建了一个背景图片，仅在firefox中显示，而不在其他浏览器中显示（检查Chrome，IE和Opera）。

这是我的HTML（由Joomla生成）：

<input class="button" type="image" onclick="this.form.searchword.focus();" src="/dev/" value="Search">

这是我的CSS：

#search .search .button{
    background: #1B3F8B url('../images/search_btn.png') no-repeat center center;
    border:1px solid #1B3F8B;
    width:22px;
    height:32px;
    float:right;
}

我的图片是RGB .png

奇怪的是，我看到它已加载到谷歌浏览器中，但在半秒后它消失了，它显示了常规的“图像未加载”图像。

我似乎无法找到这个问题的任何答案，任何人都有这个问题的经验或知道我做错了什么？

Answer 1

您需要将type="image"更改为type="button"。由于背景图像位于css类中，因此您也可以从HTML标记中删除src。

标记看起来像：

<input class="button" type="button" onclick="this.form.searchword.focus();" value="Search">

您还需要更新CSS以添加逗号：

#search, .search, .button{

Answer 2

您需要用逗号分隔CSS中的选择器。我认为您仍然需要删除src="/dev/"。

#search, .search, .button {
    background : url('../images/search_btn.png') center center no-repeat #1B3F8B;
    border : #1B3F8B solid 1px;
    width : 22px;
    height : 32px;
    float : right;
}

http://jsfiddle.net/M5BaR/1/

CSS背景图片只在firefox中工作

2 个答案: