링크걸린 이미지에 잔상이 생깁니다.

[toorn]

파폭 2.x.10 버전부터 이런 현상이 생겼습니다. 파폭 3 RC x 버전에서도 마찬가지 입니다. 파폭 2.x10 이전 버전과 IE 에서는 전혀 이런 현상이 없습니다.

어떤 증상이냐 하면 링크가 걸린 이미지에 클릭을 하기 위해서 마우스를 올리면 이미지 아래쪽에 a:hover 로 설정된 모양으로 잔상이 생깁니다.

style.css 에서

Code: Select all

a:hover {
	background-color: #4E5706;
	color: #F5F5CF;
}

로 설정했는데 이상하게 이미지에서도 적용이 되는지 이미지 아래쪽에 background-color 이 적용되어서 색이 변합니다. background-color 을 하지 않고 underline 으로 하면 이런 증상은 없습니다. 하지만 저는 hover 에서 background-color을 사용하고 싶습니다. 어떻게 하면 좋을까요?

http://good-manner.com/2007/11/25/87/ 제 블로그 입니다. 이미지에 마우스를 올리면 이미지 아래쪽에 잔상이 생깁니다.

이것때문에 3일째 고민하는데 도저히 답이 안나와서 도움을 청합니다.

[peecky]

a태그를 부피가 있는 inline 엘리먼트로 인식하나보네요.

Code: Select all

a img { vertical-align:middle;  }
또는
a img { display:block; }

첫번째것은 이미지 세로 크기가 텍스트 높이보다 작으면 배경색이 보이게 됩니다. 두번째것은 이미지 크기에 상관없이 배경색은 안보이지만 텍스트랑 링크걸린 이미지랑 한 줄에 같이 쓸 수 없게 됩니다. 적절히 판단해서 쓰세요.

[toorn]

정확히 말씀하신 대로입니다. 친절하신 답변 감사합니다. 그런데 이것참 어렵군요. display:block 을 하면 제대로 나오기는 하는데 텍스트들이 아래줄로 다 밀려버리네요. 게다가 이미지가 아닌 이미지가 있는 행에만 마우스가 올라가도 hover 효과가 나타나는군요....쩝...

파이어폭스가 업그레이드 했다고 해서 CSS 를 새로 써야 하는 상황은 반갑지 않은데 말이죠...