CSS3 вопрос опрокидывания в Firefox

Question

Так Im пытается создать меню с простым опрокидыванием с помощью 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/хроме, но Firefox имеют некоторые проблемы с выравниванием что я не могу понять. Есть идеи?

Check out the issue here (make sure to view with firefox)

Answer 1

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

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

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

Btw, должен сказать, очень красивый дизайн сайта :)

Answer 2

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

-webkit-transition: opacity .08s linear; 

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

Answer 3

• -webkit- префиксы для браузеров на основе Webkit (сафари, хром).
• -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; 
}