使用 CSS 样式的按钮元素在 IE6 中不显示背景图像答案

【问题标题】：Button element styled with CSS is not showing the background-image in IE6使用 CSS 样式的按钮元素在 IE6 中不显示背景图像
【发布时间】：2012-03-07 03:05:45
【问题描述】：

我有一个针对 IE 6 的旧版 Web 应用程序，并且正在重新设计。这些按钮的默认浏览器按钮外观替换为蓝色按钮图像。

我的以下 HTML 和 CSS 在 IE 8 上运行良好，但在 IE 6 上不行。

HTML

<button id="add">Add</button>

CSS

button
{
    width: 110px;
    height: 28px;
    background-image: url('../images/button.png');
    background-color: transparent;
    border: 0px none #ff0000;
    cursor: hand;
    font-family: Myriad Pro, Helvetica;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
}

使用 CSS，如何让背景图像在 IE 6 中显示？

理想情况下，可以将修复程序放在 ie6.css 中，以便在最终放弃 IE6 支持时轻松删除。

请不要放弃对 IE6 的支持。此旧版应用程序仅针对 IE6 设计，并在 IE6 是唯一支持的浏览器的组织内部使用。

【问题讨论】：

我知道，我知道，但是……只要放弃对 IE6 中好东西的支持，人们就会收到消息 :) ie6countdown.com
这样想 - 使用 IE6 的人不会关心网络的外观。所以 minitech 是对的，别担心 :)。它是可访问的，这才是最重要的。
我希望 LOVE 摆脱对 IE 6 的支持，但在这个组织中，IE6 仍然是唯一受支持的浏览器。该应用程序仅供内部使用。所以不幸的是，这不是一个选择。
除非您需要该按钮来执行提交操作，否则您可以将其替换为 <a> 并将其样式设置为按钮。功能方面，它的行为是一样的。

标签： html css button internet-explorer-6 background-image

【解决方案1】：

如果我在 IE6 上的记忆凹处对我有用，它不会识别 button 元素上的 background-image。对此你无能为力。

虽然，再次基于内存，如果你可以将其更改为input（属性type="image"），即使在 IE6 上你也可以得到你想要的效果。

【讨论】：

【解决方案2】：

使用background CSS 属性而不是background-image 属性可以达到blog post 中所述的技巧（摘录如下）。

在 Firefox 2.0 中工作的 background-image 属性只是没有对IE6有任何影响。经过一番谷歌搜索后，我意识到 background-image 属性在 IE 上不起作用，我们需要使用背景属性。

这对我有用：

button
{
    background: transparent url('../images/button.png') no-repeat top;
}

【讨论】：