CSS3 ролловер проблема в Firefox

Question

Поэтому я пытаюсь создать меню с простыми ролловерами, используя CSS:

img.fade {
  opacity: 1;
  -webkit-transition: opacity .08s linear;
}

img.fade:hover {
  opacity: 0;
}

Html:

<a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/home_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/home_btn.png" class="fade" /></span></a>

     <a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/explore_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/explore_btn.png" class="fade" /></span></a>

     <a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/dives_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/dives_btn.png" class="fade" /></span></a>

Работает нормально в safari / chrome, но у Firefox есть некоторые проблемы с выравниванием, которые я не могу исправить. Есть идеи?

Проверьте проблему здесь (убедитесь, что просмотр с Firefox)

Answer 1

Ваш переход имеет расширение поставщика -webkit-:

-webkit-transition: opacity .08s linear;

Так что Firefox его не распознает, поскольку Firefox работает на Gecko, а не на WebKit.Попробуйте добавить -moz-transition и посмотрите, что произойдет (я еще не играл с CSS-переходами).

Answer 2

Исходное изображение (желтое) является встроенным, в то время как наложенное изображение является блочным, а встроенное изображение получает немного другое расположение из-за дополнительного отступа встроенных изображений ниже, я думаю, что это как-то связано с базовым интервалом или чем-то еще.1001 *

В любом случае, кажется, что предоставление блока отображения диапазона переноса решает проблему.Хотя я не могу засвидетельствовать, что это делает в других браузерах, я только что сделал быстрый взлом Firebug.

Если это не исправит это, или испортится в других браузерах, вам в основном придется повторитьвсе немного, чтобы оба изображения были либо блочными, либо встроенными (или, может быть, инлайн-блоком, но дело в том, что они должны иметь одинаковый стиль отображения).

Кстати, очень хороший сайтдизайн:)

Answer 3

• -webkit- префиксы предназначены для браузеров на базе Webkit (safari, chrome).
• -moz- префиксы предназначены для браузеров Gecko (Firefox).
• -o- - дляOpera.
• -ms- для Internet Explorer.(Я думаю, это только IE8 +)

Они обычно используются для экспериментальных свойств CSS и обычно находятся в черновике CSS (в настоящее время в основном CSS3)

Некоторые из них, хотя и неу него больше нет префикса, даже если он все еще находится в черновике (пример: border-radius не требуется префикс в текущих выпущенных браузерах Webkit и в Firefox 4, но все еще требуется в Firefox 3.6)

Лучшее решение для будущей совместимости - всегда использовать префиксные, а затем ставить обычное свойство в конце.

Пример:

img.fade {
    -webkit-transition: opacity .08s linear;
    -moz-transition: opacity .08s linear;
    -o-transition: opacity .08s linear; /* Haven't tested if it's supported in Opera though */
    /*If it is supported in the IE9 beta and need the prefix, u can also add -ms-transition: opacity .08s linear;*/
    transition: opacity .08s linear;
}