[CSS] inline-block / text-indent : ie Bug

분명히 ir기법으로 많이 써봤던 것 같은데

난 이 버그를 왜 이제야 보게 되었지?

지금까지 수많은 작업을 해왔는데 이렇게 안써봤을리도 없을텐데 말이야...

상황은 간단했다.

버튼 이미지를 가운데 정렬시키고 :hover를 하기 위해서 배경이미지로 넣었는데...

CSS는
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
display:inline-block;
text-indent:-9999px;
background:#url() no-repeat 0 0;
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

그런데 ie에서 text-indent 이녀석이 배경이미지 까지 날려버리네...ㅎ

해결 방법으로는 
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

display:inline-block;
/*text-indent:-9999px;*/
line-height:-9999px;
vertical-align:bottom;
background:#url() no-repeat 0 0;
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
위의 방법이 안될경우에 아래의 방법을 사용 이 방법이 젤로 좋은 듯...

font-size:0; line-height:0; text-shadow:none; color:transparent;
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ



아...찜찜해...별로 좋은 방법도 아닌것 같다.
단순하게 생각하면 그냥 이런 상황을 만들지말자.

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

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

Swiper lazyLoading