Элемент кнопки, стилизованный под CSS, не отображает фоновое изображение в IE6

Question

У меня есть устаревшее веб-приложение, которое предназначено для IE 6 и обновляется.Кнопки браузера по умолчанию выглядят как кнопки с изображением синей кнопки.

Мои следующие 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 является ЕДИНСТВЕННЫМ поддерживаемым браузером.

Answer 1

Если углубления моей памяти в IE6 хорошо мне подходят, он не распознает background-image в элементе button. С этим ничего не поделаешь.

Хотя, опять же, основываясь на памяти, если вы можете изменить его на input (атрибут type="image"), вы сможете получить желаемый эффект даже в IE6.

Answer 2

Использование свойства background CSS вместо свойства background-image позволяет добиться цели, как описано в этом сообщении в блоге (выдержка ниже).

Свойство background-image, которое работало в Firefox 2.0, просто не работало иметь какое-либо влияние на IE6. После небольшого поиска я понял, что свойство background-image не будет работать в IE и что нам нужно использовать свойство background.

Вот что у меня работает:

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