CSS 背景图片仅适用于 firefox

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

奇怪的是，我看到它已加载到 Google Chrome 中，但半秒后它就消失了，并显示常规的“图像未加载”图像。

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

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{