Button element styled with CSS is not showing the background-image in IE6

问题

I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.

My following HTML and CSS works fine on IE 8, but not in 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;
}

Using CSS, how can I get the background image to show in IE 6?

Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.

Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.

回答1:

If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.

Although, again based on memory, if you can change it to an input (attribute type="image") you might be able to get the effect you want even on IE6.

回答2:

Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).

The background-image property that worked in Firefox 2.0 just did not have any effect on IE6. After a bit of googling, I realized that the background-image property will not work on IE and that we need to use the background property.

This is what works for me:

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

来源：https://stackoverflow.com/questions/9595258/button-element-styled-with-css-is-not-showing-the-background-image-in-ie6

标签

html

css

button

internet-explorer-6

background-image