자바스크립트 속도 때문에 골치를 앓고 있는 이라면 당장 설치하길…

암튼 좀 짱임.

IE6을 사용하는 사람들에게 캠페인을 할 게 아니라 MS를 들들 볶아야 한다.

아, 제발… 서비스팩도 좋고 뭐도 좋으니… IE7로 자동 업그레이드 좀 시켜주소. 지금 안되고 있는 게 아니라 심각한 보안 문제처럼 적극적으로 푸시해달란 말이오. 웹 사이트 좀 만들어볼라면 IE6 성능문제 때문에 상상의 날개가 부러진 채로 시작하고 있소. 실버라이트도 좋고 혁신도 좋소. 그 전에 기본적인 것 좀 어떻게 안되겠소?

IE6, 7에 대해서는 display:inline-block; 과 같은 효과를 내게 합니다. ( inline-block 이 지정된 요소에도 vertical-align 이 유효하게 됩니다.)

div.sample1 div{
    display:table-cell;
    width:100px;
    vertical-align:middle;
}

* html div.sample1 div{ /* IE 6 */
    display:inline;
    zoom:1;
}

*:first-child+html div.sample1 div{ /* IE 7 */
    display:inline;
    zoom:1;
}

IE에 display: inline; 부여 후 zoom 속성을 통해 레이아웃 요소로 만듦으로서 inline-block 의 효과를 만드는 것이 핵심입니다. display: table-cell; 이 적용되지 않은 블럭 요소는 세로 중앙 정렬이 되지 않고 inline 이 적용된 요소는 세로 중앙 정렬이 되는 차이를 미묘하게 이용한 것이지요.

지원 브라우저

yomotsu님의 글에서 발췌한 내용입니다.

• 파이어폭스 1, 2
• 넷스케이프 6, 7.1
• 사파리 2, 3
• 오페라 9.2 이상
• IE 5.01, 5.5, 6, 7 ( inline-block 으로 구현 )

제약사항

이 방법의 제약사항은 인라인 요소의 세로 중앙 정렬은 다른 인라인 요소의 최대값에 영향을 받는다는 것입니다. 이것은 가로 너비를 갖지 않는 – 공간을 차지하지 않는 것처럼 보이는 – 마크업을 삽입하여 해결할 수 있습니다. 당신이 시맨틱 마크업 신봉자라면 IE Conditional Comments 필터링이나 자바스크립트와 DOM을 통해 의미없는 마크업을 삽입할 수 있겠습니다. 이마저도 싫다면… 글쎄요. ㅠㅠ

또 한가지가 IE를 위해 사용하는 핵입니다. IE7 구분을 위해 사용되어 온 핵 *:first-child+html이 현재의 IE8 – 베타 (8.0.6001) 버전 – 에도 적용되고 있고 IE8은 display: table-cell;을 지원하고 이전 버전과 달리 레이아웃(hasLayout)이 사라졌기 때문에 yomotsu님이 사용한 IE용 핵과는 다른 방법 - 예를 들어 IE Conditional Comments 필터링 – 으로 적용하기를 추천합니다. 아래 예제에는 IE Conditional Comments 필터링을 사용하였습니다.

IE7 이하에서 세로 중앙 정렬할 요소가 차지하는 영역이 다른 최신 브라우저들과 다를 수 있습니다. 이미지와 텍스트가 나란히 출력되는 예제에서 텍스트에 배경색이 부여된 영역을 비교해보세요.

몇가지 예제

• 이미지와 텍스트가 나란히 출력되는 예제
• 텍스트를 높이가 지정된 블럭요소의 세로 중앙에 위치시키는 예제

참고 URL

• Position browse
• 이미지 등의 옆에 있는 텍스트를 상하중앙으로 배치하기
• Display
• hasLayout 속성과 홀리 핵(Holly hack)
• Vertical Centering With CSS: 이 글에서 다루지 않은 다른 여러가지 방법에 대한 소개. 괜찮은 방법이 많다.

자바스크립트를 통한 IE의 <button> 태그 버그 극복

<button> 태그가 IE에서만 문제가 되고 있고 IE는 특별한 조치 없이는 자바스크립트를 기본적으로 사용하기 때문에 자바스크립트를 통해 IE의 버그를 극복할 수 있다고 생각되었다. 그래서 찾아보니 Multiple Buttons IE Workaround라는 글이 있었다. 이 글이 제시하는 방법은 버튼을 클릭할 때 value 속성(값)을 IE의 버그로 인한 값에서 정상적인 값으로 돌려주는 것이었는데 이것은 폼의 제출 시에는 정상적으로 작동할 수 있으나 onsubmit 이벤트에서 폼 제출을 중지하는 경우 등의 상황에서 얘기치 않은 결과를 가져왔다.

IE Button Fix

그래서 위의 단점들을 해결하고 여전히 문제를 가지고 있던 IE5까지 해결한 IE Button Fix를 만들었다. 문제를 해결하면서 새로운 제약사항이 생겼는데 이는 사용시에 사용할 웹 사이트의 성격과 제약사항을 잘 파악하여 사용여부를 판단할 수 있을 것이다.

<button> 태그는 <input> 태그에 비해 많은 장점을 갖는다. IE의 버그는 그 동안 이래저래 <button> 태그의 장점을 사용할 수 없도록 제한해왔지만 IE Button Fix가 이를 어느정도 보완해줄 수 있으리라 생각한다.