Проблемы с наведением кнопки CSS между Firefox и Chrome при использовании спрайта изображения - PullRequest
Новая
       22

Проблемы с наведением кнопки CSS между Firefox и Chrome при использовании спрайта изображения

1 голос
/ 17 июня 2011

Ролловер использует одно изображение как для обычного, так и для парящего состояний. Кнопки хорошо отображаются как в Firefox, так и в Chrome, но в Firefox не работает ролловер.

Вот HTML, который использует список для нескольких кнопок (здесь показан только один экземпляр кнопки): 

<div id="buttons">
    <ul class="stencil_buttons">
      <li>
        <button type="submit" id='addField'>
           <a class="global_button" href=""><span>Button Text</span></a>
        </button>
     </li>
   </ul>
</div>

Вот CSS: 

a.global_button span {
   background: transparent url('../images/button_left.png') no-repeat 0 0;
   display: block;
   line-height: 22px;
   padding: 3px 0 5px 18px;
   color: #fff;
}

a.global_button {
   background: transparent url('../images/button_right.png') no-repeat top right;
   display: block;
   float: left;
   height: 30px;
   margin-right: 6px;
   padding-right: 20px;
   text-decoration: none;
   font-size: 14px;
}

a.global_button:hover span {
   background-position: 0 -30px; color: #fff;
}

a.global_button:hover {
   background-position: right -30px;
}

Заранее спасибо за помощь.

1 Ответ

3 голосов
/ 17 июня 2011

Попробуйте button:hover a.global_button span и button:hover a.global_button вместо соответствующих селекторов выше.Хотя селекторы в приведенном выше вопросе будут работать в FF, когда окружающий элемент не является button, они не работают, когда он есть;Я предполагаю, что состояние наведения останавливается на кнопке и не фильтрует дочерние элементы в FF.

...