[html] 링크 포커스 사이즈 버그

아래와 같은 코드가 있다고 할때

<a href="#"><img src="" alt="이미지" /></a>

포커스가 있을때 이미지 사이즈를 넘치게 포커스가 표시될 때가 있다.


주로 크롬, 사파리 브라우저에서 나타나며 

크롬의 경우

font-size:0을 추가해 주면 해결 된다.

사파리의 경우는 

vertical-align:top 을 추가해 주면 해결 된다.

특이 사항으로는 사파리는 font-size:0을 주면 포커스 크기 높이가 0이 되므로 같이 사용하면 안될 듯...

근본적인 원인은 아직 파악 못했는데 

은근히 신경쓰이네...

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading