CSS3 롤오버 문제

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> 

사파리/크롬에서 확인을 작동하지만 파이어 폭스는 약간의 정렬 문제가됩니다 내가 고칠 수없는 것. 어떤 아이디어? 파이어 폭스는 게코하지 웹킷에서 실행되기 때문에,

-webkit-transition: opacity .08s linear; 

그래서 파이어 폭스가 인식되지 않습니다

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

Answer 1

원본 이미지 (노란색)이 중첩 한 블록 인 반면, 인라인 하나 의한 인라인 이미지 아래 얻을 여분 간격과 약간 다른 위치를 얻는다 인라인이고, I는 있다고 생각 기준선 간격 또는 무언가와 관련이 있습니다.

어떤 경우에도 줄 바꿈 표시 줄을 지정하면 문제가 해결되는 것 같습니다. 내가 다른 브라우저에서하는 일을 증명할 수는 없지만, 나는 단지 파이어 버그 해킹 만했다.

다른 브라우저에서 문제가 해결되지 않으면 두 가지 이미지가 모두 블록 또는 인라인 (또는 인라인 블록 일 수도 있지만 어쩌면 포인트가 될 수 있음)되도록 약간 재실행해야합니다. 그들은 같은 표시 스타일을 가져야한다).

Btw는 매우 멋진 사이트 디자인이라고 말해야합니다.

Answer 2

귀하의 전환은 -webkit- 공급 업체의 확장자를 갖습니다. -moz-transition을 추가하고 무슨 일이 일어나는 지 확인해보십시오. (CSS 전환과 직접 연주하지 않았습니다.)

Answer 3

• -webkit- 접두어는 웹킷 기반 브라우저 (사파리, 크롬) 용입니다.
• -moz- 접두어는 Gecko 브라우저 용입니다 (Firefox).
• -o-은 Opera 용입니다.
• -ms-은 Internet Explorer 용입니다.

이 보통 실험 CSS 속성에 사용됩니다 (나는 단지하지만 IE8 + 생각) 그들은 (현재 대부분 CSS3) CSS 초안에 보통

그들 중 일부를하지만, 더 이상 접두사가없는 (예 : 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; 
}