다름이 아니라 div 안에 img 가 위치할 경우 IE와 FF에서의 다르게 나타나서 질문드립니다.
dtd는 xhtml 1.1을 사용했습니다. IE는 7.0 입니다.
1. <div style="background-color:red;"><img src="" style="background-color:blue;" alt="목표및전략"/></div>
이러한 경우 IE에서는 div의 height가 img의 height와 동일하게 나타납니다.
2. <div style="background-color:red;">
<img src="" style="background-color:blue;" alt="목표및전략"/>
</div>
이러한 경우에는 IE에서는 div의 height가 img의 height 에 아래위로 4px 씩 총 8px가 증가된 높이로 나타납니다. 그런데, FF의 경우는 1, 2와 관계없이 2번의 형태(+8px)로 나타납니다.
FF에서도 레이어이 높이가 img의 높이와 동일하게 나오는 방법은 없는지요.
img를 div의 background-image로 처리하지 않고 말입니다.
이미지의 크기가 기본 폰트 크기보다 작을시에 생기는 문제 일수 있습니다 div에 height:1%; line-height:1%; 를 넣어줘 보세요
dtd는 xhtml 1.1을 사용했습니다. IE는 7.0 입니다.
1. <div style="background-color:red;"><img src="" style="background-color:blue;" alt="목표및전략"/></div>
이러한 경우 IE에서는 div의 height가 img의 height와 동일하게 나타납니다.
2. <div style="background-color:red;">
<img src="" style="background-color:blue;" alt="목표및전략"/>
</div>
이러한 경우에는 IE에서는 div의 height가 img의 height 에 아래위로 4px 씩 총 8px가 증가된 높이로 나타납니다. 그런데, FF의 경우는 1, 2와 관계없이 2번의 형태(+8px)로 나타납니다.
FF에서도 레이어이 높이가 img의 높이와 동일하게 나오는 방법은 없는지요.
img를 div의 background-image로 처리하지 않고 말입니다.
이미지의 크기가 기본 폰트 크기보다 작을시에 생기는 문제 일수 있습니다 div에 height:1%; line-height:1%; 를 넣어줘 보세요
답변1) 이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)
이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는
<img>태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다.
