본문 바로가기

Local Oriented/HTML CSS JS

float 과 text-align 의 이상한 만남..?


아래 2개의 코드는 개념상 동일하게 렌더딩 되어야 함에도 불구하고,
IE(MS 사의 인터넷 익스플로러) 몇가지 버전에서 다르게 표시가 되네요.. ㅠ.ㅜ
다른 웹브라우저들에서는 정상적으로 나오고요..

1. <p style="text-align:right"><span style="float:left"><strong>...</strong>...</span><span>...</span></p>
2. <p style="text-align:left"><span><strong>...</strong>...</span><span style="float:right">...</span></p>

그런데, 위의 2번으로 하면 두번째 span 태그의 내용이 다음 라인으로 밀려나는 현상이 발생하더군요.
IE 모든 버전에서 그런 것이 아니고, IE7 과 IE8 의 몇몇 마이너버전(?)에서 발생했습니다.
볼수록 알 수 없는 MS 사의 개발 정책에 일단 두 손 다 들었습니다.