Фоновое изображение Anchor не работает с Safari / Firefox

Question

У меня есть следующий Css, где я использовал фоновое изображение.Затем я генерирую Anchor и назначаю класс CSS, который имеет изображение.Он отлично работает с IE, но не работает с Safari, Firefox и Chrome.

Может кто-нибудь помочь мне, как это исправить.Ниже приведены подробности.

CSS

.HOME
{
   BACKGROUND-IMAGE: url(../images/home.jpg);
   WIDTH: 56px;
   BACKGROUND-REPEAT: no-repeat;
   HEIGHT: 20px
}
.HOME A
{
   WIDTH: 56px;
   HEIGHT: 20px
}
.HOME A:hover
{
   BACKGROUND-IMAGE: url(../images/home1.jpg);
   WIDTH: 56px;
   HEIGHT: 20px
}

HTML

<td class="HOME"><A href="#abc.html" Class ="Home" onclick="OpenPage()"/></td>

Answer 1

background-image становится устаревшим, я предлагаю использовать:

a.home { background: url(../images/home.jpg) no-repeat; width:56px; height:20px }
a.home:hover { background: url(../images/home1.jpg); width:56px; height:20px }

Answer 2

Я пытался сделать что-то похожее и обнаружил, что добавление позиции: относительной или абсолютной позволяет работать в Chrome / Safari / Firefox.

Answer 3

Это сработало бы, если бы вы использовали следующий CSS:

a.home { background-image:url(../images/home.jpg); width:56px; background-repeat:no-repeat; height:20px }
a.home:hover { background-image:url(../images/home1.jpg); width:56px; height:20px }