CSS를 처리하는 메커니즘에 관해서 IE에는 항상 사람들이 피를 흘리게 만드는 많은 것들이 있지만 현재의 개선 사항에는 여전히 만족하고 있습니다.
pseudo-class:hover에 대한 지원을 예로 들어 보겠습니다. IE7+에서는 마침내 a 이외의 태그에 대한 지원이 추가되었습니다. 물론 이러한 개선에는 박수를 보내야 하지만 IE6에서는 a에 대한 :hover의 지원이 그다지 만족스럽지 않습니다. 다음은 제가 간단히 이야기하고 싶은 문제입니다. IE6 및 이전 브라우저에서 마우스를 가져가면 됩니다.
많은 사람들이 IE6 및 이전 브라우저(이하 IE6-)에서 :hover에 대한 몇 가지 문제를 이미 알고 있을 수 있습니다. 저는 주로 a:hoverspan{}과 같은 문제에 대해 이야기하고 싶습니다.
때로는 간단한 동적 효과를 추가하기 위해 :hover를 사용하는 경우가 많습니다. 예를 들어 마우스가 링크 위로 지나갈 때 텍스트 색상이 변경되는 경우가 많습니다. 좋다:
예, 모든 브라우저에서 작동합니다. 그러나 이것을 다음과 같이 바꾸면:
IE6에서는 아무 일도 일어나지 않는다는 것을 알게 될 것입니다. 우리의 스타일은 유효하지 않습니다. 예, 그렇습니다. 많은 사람들이 이 문제를 접하고 해결했어야 했습니다.
예, 이 문제를 해결하려면 다른 a:hover{} 스타일을 추가하기만 하면 됩니다. 여기에는 확대/축소, 패딩, 여백 및 기타 속성이 포함될 수 있습니다. 다음과 같이:
정상적으로 효과가 복구된 것을 보고, :hover 실패의 원인이 무엇인지 생각해 보았습니다. 확대/축소, 표시, 패딩 및 기타 속성을 사용하여 이를 수행할 수 있으므로 Haslayout 때문이 아닐까 생각했습니다. 글쎄, 아마도 그럴 것입니다. 하지만 계속 테스트하면 색상, 글꼴 크기, 오버플로(xx:yyy와 같이 존재하지 않는 속성도 포함)와 같이 a:hover{}에 어떤 속성을 작성하든 관계없이 다음을 수행할 수 있다는 것을 알게 될 것입니다. 정상으로 복원하세요.
여기서 테스트한 후 약간 충격을 받았나요? 네, 저도 그렇습니다. 이유는 아직 모르겠지만 누군가는 알고 있을지도 모릅니다.
a:hover{줌:1;}
a:여기에 마우스를 올리세요{color:#F00;}
마우스를 올리면 색상이 변경됩니다.
a:여기에 마우스를 올리세요{color:#F00;}
마우스를 올리면 색상이 변경됩니다.
a:hover{색상:#F00;}