포럼
ie8에서 이미지 사라지는 버그 해결법.
2012.04.03 12:39
개인적으로는
common쪽에서 <img {border:0; max-width:100%;height:auto} 가 지워지는게 옳다고 보지만
사실 이 부분을 지워줄지 안지울지는 모르는 상황에서 자구책을 알려 드립니다.
문제는 ie8에서 이미지를 감싸는 테그중에 display:inline-block이나 이와같은 속성값을 가지고 있는 float:left를 사용하면 이미지가 사라집니다.(inline-block가 오면 공간확보를 못하는 버그 같습니다.)
해결책은 간단합니다.
위 두 속성을 레이아웃에서 사용하지 않든지(이게 이미지를 바로 감싸고 있는 테그의 inline-block에 영향을 받는게 아니라 무한히 올라가서 display:inline-block을 가지고 있다면 영향을 주더군요.- 이게 가장 골치아픈 부분이 아닌가 싶습니다.)
아니면 상위 테그의 inline-block과 img 사이의 테그에 넓이를 확보해 두십시오.
이미지 바로 감싸는 tag에 style로 width를 입력해 둔다든지 아니면 css에서 width처리해도 되는거 같습니다.
단 이미지에 속해있는 width값은 해결책이 안됩니다.
댓글 2
-
guny
2012.04.03 12:48
-
ForHanbi
2012.04.03 12:58
오우~~ 그렇네요. 이미지에 넓이와 높이값이 없어도 되네요.
하지만 문제가 이미지에 넓이와 높이를 넣어라는게 권장이라...
다시 생각해 보니 레이아웃에서 자체적으로
img{max-width /*\**/:none\9}
이렇게 사용해도 될거 같습니다.
굳이 일일이 img를 감싸는 테그에 넓이를 넣을필요 없이...
이것으로 제가 아는 범위에서는 공유하기 위해 최선을 다한거 같으니까
이문제는 저도 이만......
Using max-width on images can make them disappear in IE8