2011-08-31 7 views
2

CSS3 전환을 사용하여 마우스 오버시 불투명도가 변경되는 HTML 요소가 있습니다. 문제는 Firefox (Windows의 경우)에서 요소 (<div>) 내의 텍스트 (<p >)가 불투명도 변경 동안 눈에 띄지 않게 어두워지며 분수이어야하는 방식으로 "팝백"합니다 전환이 끝난 후 1 초가 걸립니다. 이 (비디오)처럼 :CSS3 불투명도 전환 중에 글꼴 디밍 문제를 해결할 수 있습니까?

http://screencast.com/t/zzWc9EF8wq4c

이 문제는 크롬에서 발생하지 않습니다.

어떤 아이디어가 원인 일 수 있습니까? 해결 방법은 무엇입니까?

+0

내 머리 위로 설정 위치를 시도해보십시오 : 텍스트에 대한 상대? – Alex

+0

그게 도움이되지 않았다, 나는 두려워한다. (나는 부모 div에서 자식 p를 분리하고 div의 꼭대기에 절대적으로 위치 할 수 있다고 생각한다. 그러나 그것은 상황을 더욱 복잡하게 만든다. 모든 것을 숨기 ...) – martinpolley

+0

@martinpolley - p 요소에 배경을 적용하고 있습니까? 아니면 div에 있습니까?이 문제는 일반적으로 요소에 배경색이 설정되어 있지 않은 경우에 발생합니다 (일반적으로 IE에서는 대단히 유용합니다). – easwee

답변

3

요소에 RGBA 색상을 사용하고 요소 불투명도를 전환하는 대신 전환하십시오 (DOM 트리의 모든 하위 요소까지 계단식으로 내려 가기 때문에). 그게 내 프로젝트에 어떻게 할거야 :)

+0

괜찮 았는데 시도했는데 아주 멋지게 작동합니다. 감사합니다 :) 하지만 IE에서 무엇을 해야할지 새로운 문제가 있습니다. 먼저 RGBa 대신 RGB로 대체 배경색을 설정하려고 시도했지만 (이는 먼저 선언함으로써), 저를 위해 작동하지 않습니다. IE에서 요소는 배경색이 전혀 없습니다. ( 아이디어가 있습니까? – martinpolley

+0

결국 IE에서 조건부 주석을 사용하여이 문제를 해결했습니다. 도와 주셔서 대단히 감사합니다! – martinpolley

+0

그게 전부 잘하고, upvote에 피드를 느끼고 다른 사람을 도울 수있는 대답으로 설정하십시오 :) – DanTonyBrown

관련 문제