NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


IE6~7 : button, input. Extra padding bug.

본문 건너 뛰기

"나는 목에 칼이 들어와도 리바이벌은 안해" 라는 개그맨의 유행어가 생각납니다. 오늘 새벽에는 새 글쓰기 욕심을 잠시 접어놓고 작년 가을에 공개했던 CSS Text Button Design. 이라는 포스트를 갱신하기로 했습니다. 정확하게 말해서 갱신한 것은 포스트가 아니라 포스트에서 주요하게 설명했던 CSS 버튼 예제코드 입니다. 한번 작성한 코드를 두고 두고 쓰면 좋겠지만 버그도 발견되고 브라우저도 좋아졌고 여러분들이 댓글로 주신 피드백도 반영하면서 좀 더 이상적인 코드를 작성해야겠다는 생각이 들었습니다. 지금도 완벽하지 않을지 모르지만 6개월 전보다 확실히 좋아졌다고 자평해 봅니다. 해결했던 버그에 대해서 조금 더 자세히 설명해 드리겠습니다.

IE 6~7 브라우저에서 발생하는 button, input 요소의 패딩 버그.

IE 6~7 브라우저는 button, input 요소의 표시 값으로 텍스트를 취할 때 문자열의 길이에 따라 좌우 패딩이 비정상적으로 늘어나는 버그가 있습니다.

button, input 요소의 표시 값으로 텍스트를 취한 예.

위 버튼은 실제로 코딩한 버튼 입니다. IE 6~7 브라우저로 접근해서 보시면 표준계열 브라우저에서 보는 것과 다르게 보일 것입니다.

button, input 요소의 표시 값으로 텍스트를 취할 때 IE 6~7 브라우저의 렌더링. 비정상적인 좌우 패딩 발생.

위 버튼은 IE 6~7 에서 렌더링 하는 모습을 이미지로 떠온 화면 입니다. 표준계열 브라우저와 비교하면 1~2px 정도가 아니라 눈속임을 할 수 없을만큼 심하게 차이가 나서 좁은 공간에서 버튼이 여러개 나열되는 경우 줄 바꿈되는 상황을 어렵지 않게 추측할 수 있습니다.

무엇이 문제인가? 버튼의 너비가 가변적인 경우 문제.

문자열의 길이를 알 수 없는 텍스트 버튼을 구현하고자 할 때 문제가 됩니다. 문자열의 길이가 불변하는 버튼이라면 CSS의 width 속성을 이용하여 너비를 고정해 버리면 간단하게 해결되지만 상황에 따라 또는 다국어 버전을 준비해야 한다면 CSS로 너비를 고정하면 안됩니다. padding:0 속성으로도 저 여분의 패딩은 제거되지 않습니다.

해결 방법. overflow:visible.

의외로 간단하게 해결 됩니다. button 또는 input 요소에 CSS의 overflow:visible 속성을 적용하면 IE 6~7 브라우저에서 여분의 패딩이 제거 됩니다. 얼마전에 우연히 발견 했는데 벼르다 벼르다 이제서야 블로그에 공유 하네요. 사실 검색해서 찾아보면 답이 있는데 그걸 여태 찾아볼 생각도 못했습니다. ㅠㅠ;

button, input 요소에 overflow:visible 적용한 예.

표준 계열 브라우저로 보시면 별 변화가 없겠지만 IE 6~7 브라우저로 보시면 여분의 패딩이 사라진 것을 확인하실 수 있습니다. IE 6~7 에서 좌우 패딩이 너무 적다고 판단 되시면 그때 비로소 CSS padding 속성으로 좌우의 패딩을 조절하시면 됩니다. CSS Text Button Design. 예제 코드에 이 해결방법이 적용되어 있습니다. 한번 써보시고 다른 문제는 없는지 지속적인 관심과 피드백 주시면 저도 열심히 한번 갱신해 보겠습니다.

분류: CSS,웹 디자인,웹 표준 | 2009년 5월 13일, 22:01 | 정찬명 | 댓글: 39개 |
트랙백URI - http://naradesign.net/wp/2009/05/13/825/trackback/

39개의 댓글이 있습니다.

  1. 윤좌진 댓글:

    사소한 팁 하나요~
    버튼은 border-width 속성을 주게 되면 브라우저와 OS가 가지는 기본속성을 잃어버리게 되요 그렇게 되면 모양은 좋지 안지만 브라우저별로 크기를 맞출 수 있지죠 하지만 MaxOs의 올록볼록한 버튼이나 XP테마의 둥근 기본형 고유의 버튼 모양을 유지하고 싶다면 각각의 브라우저와 OS의 최소 마지노선을 정하는게 좋아요 예를들어 버튼의 크기(width)를 주고 text-align:center 을 줘보세요~ (미투데이 댓글 버튼을 그렇게 만들어서 이 댓글 적었다고 말하고 싶진 않지만 -_-ㅋ)

  2. 윤좌진 댓글:

    MacOS가 MaxOS가 되어버렸네요 ㅋㅋ;;

  3. mooo 댓글:

    오호라! 그렇군요.
    예전에 이것 때문에 한참 실갱이하다 포기한 적이 있었는데, 묘한 해결책이 있었네요.
    감사합니다!

  4. 정찬명 댓글:

    좌진님, 팁 감사해요. 브라우저나 OS별 뷰에 대한 개인적인 의견은 되도록 브라우저나 OS가 제공하는 기본 룩을 일관성 있게 보존해 주는 것이 사용자 경험 측면에서 바람직하다는 생각 입니다. 그걸 변경했을 때 혼란스러워할 사용자들을 고려한다면 말이죠.

  5. 정찬명 댓글:

    mooo님 블로그 XE로 제작되었군요. 스킨도 예쁘게 잘 편집해서 쓰고 계시네요. ^^ 갱신된 버튼 CSS 코드를 XE에 반영해야 되는데 별 문제가 없을지 걱정입니다. 올해는 저희 팀에서 textyle 이라는 XE 기반의 블로그 전용 도구를 야심차게 준비하고 있는데요. 나중에 배포되면 꼭 한번 써봐주세요. 감사합니다. ^^

  6. 제이즈 댓글:

    맘속에 쌓아 두었던 문제를 이렇게 간단히 해결해 주시다니… 감사합니다!

  7. 얼리 댓글:

    음, 찬명님은 역시 대인배이십니다.
    저도 얼떨결에 알게 된 해결책을 이렇게 시원하게 배포해주시니.ㅎㅎ
    뭐, 저는 배포한다고 해도 아직 찬명님만큼의 인기블로그가 아니라서
    망설였던것도 조금 있..;;;;

  8. 시노통 댓글:

    좋은팁이네요 저도 저문제 해결하느라 삽질한 경험이….생유베리감사~

  9. 아름 댓글:

    와. 이거 정말 은근히 골치가 아팠던 문제였는데 ㅠ.ㅠ
    디자인을 해 놓고 코딩에 옮기면 가변버튼들이 영 말을 안 들어서!!
    근데 엉뚱하게 풀리네요. 신기 @_@ 좋은 팁 감사합니다~ 좋은 하루되세요 ㅎ.ㅎ

  10. 정찬명 댓글:

    @얼리
    대인배가 못되서 과거에 집착하는것 같습니다. ^^; 감사합니다.

  11. 정찬명 댓글:

    @시노통 @아름
    사소한 팁이지만 도움이 되셨다니 저야 기쁠 따름입니다. ^^

  12. 나니 댓글:

    찬명님 천재;ㅁ;

  13. 얼리 댓글:

    input[type=”submit”] { overflow:hidden; }
    이런식으로 타입별로만 지정해서 쓰고있..ㅎㅎ
    찬명님 머릿속에 무엇이 들어있을까? 역시 천재;

  14. 정찬명 댓글:

    처… 천재라기 보다는 우연히 실수로 타이핑 했다가 발견한 것이고 제가 처음 발견한 것도 아닌데 이거 뭐라 말씀드려야 할지. ㅡㅡ;

  15. 정서 댓글:

    ㅎㅎㅎ 저런 방법이… 감사합니다.

  16. 정찬명 댓글:

    정서님 블로그 유용하고 멋진데요. ^^

  17. 황준상 댓글:

    블로그들이 다들 기똥차요..ㅜㅡ 개발도 직접하시는거죠? 다들??

  18. 정찬명 댓글:

    저 빼구요. ㅋㅋ.

  19. 나니 댓글:

    저도 빼구요 ㅋㅋ
    서버쪽은 전무하고 개말이라 하면 js만 아주 약간 하는 정도;

  20. 나니 댓글:

    찬명님
    여기다 올리긴 좀 그렇지만;;
    http://forum.standardmag.org/viewtopic.php?id=506
    이 글타래에 올려주신
    http://naradesign.com/2006/open_content/css_reference/CSS_Skip_To_Content_060416.html
    이 링크 깨졌는데 열어주심 안될까요? ^^;;

  21. 정찬명 댓글:

    @나니
    아주 오래된 폴더를 정리하면서 깨진 링크가 되었네요. ^^ 감사합니다. 경로 수정 해놨습니다. 이 페이지 였을꺼에요 아마.
    http://naradesign.net/open_content/reference/navigation.html

  22. 나니 댓글:

    헑. 이 시각에 답변을;;
    안주무시고 뭐하세요;;

  23. 정찬명 댓글:

    영화 보면서 놀고 있었어요. ㅎㅎ.

  24. http://www.tommyfan.com 댓글:

    您说的在中国这叫拉毛现象!

  25. 정찬명 댓글:

    혹시 이거 해설 가능하신분 계시면 부탁좀 드릴께요. ^^

  26. 김일규 댓글:

    -_-;; 전혀 문법에 안맞는데요..
    억지로 번역하면 “당신이 말하는게 중국에서 말하는 라마현상인가요?”
    라고 하는게 맞는거 같아요

  27. 정찬명 댓글:

    이해를 할 수가 없어서 뭐라 답변을 못하겠군요. ㅎㅎ. 일규님 감사합니다.

  28. 토닥 댓글:

    이 문제로 몹시 고민하고 있었는데 정말 감사합니다.
    멀게 돌아갈 길을 빠르게 갈 수 있게 되었네요. ^^

  29. 아름 댓글:

    질문있습니당. 제가 지금 저희팀 용도로 쓸 폼디자인등등 구성중인 와중에 해결이 안 되서요.
    overflow: visible; 만 주면 버튼이 100%너비로 페이지를 잡아먹네요..
    그것도 페이지로딩후 3~5초내에 갑자기 커져요.
    페이지는 순수 CSS+HTML 구성이라 스크립트, 돔문제는 아니구요.. 왜 이러는지 혹시 아시려나 여쭤봅니다 ㅠ.ㅠ
    혹여 같이 쓰이는 속성중에 서로 안 맞는 애가 있나해서 찾아봤지만 아니네요..
    구글링을 해봐도 이러한 현상에 대한 해답이나 질의도 없구요..

  30. 아름 댓글:

    헐……찾아보니 밑에

    요게 들어가 있었네요………ㅠ.ㅠ; 잘 되요.. 흑흑

  31. 아름 댓글:

    !–[if lt IE 7]
    script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js” type=”text/javascript”
    !–[if lt IE 8]
    script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript”

    이게 문제였네요; 죄송죄송; 쓸데없는 댓글이 3개 생겨뜸;

  32. 정찬명 댓글:

    @아름
    로딩 후 렌더링이 한번 더 바뀌게 될 때 JS의 영향을 의심해 봐야 한다는 좋은 교훈을 주셨네요. ㅎㅎ. 아래 적어주신 코드가 IE6를 IE7이나 IE8 처럼 바꿔주는 스크립트 인데 CSS 렌더링 버그를 잡아주기는 하지만 또 다른 문제가 여기저기서 발생하는 상황이라 실제로 사용하기 까지는 많은 검증이 필요한 코드 같습니다. 그래서 저도 아직 실무에서는 한번도 써본적은 없습니다. ^^

  33. 망구 댓글:

    a 태그 버튼 세개를 넣었을시에 버튼간의 간격이 6,7 에서와 8 과의 간격이 다른건 어케해결을할까요?

  34. 정찬명 댓글:

    @망구
    질문을 조금 더 구체적으로 해주실 수 있을까요? 지금 설명만으로는 어떤 증상인지 제가 도저히 알 수가 없네요. ^^

  35. 어리서그나 댓글:

    ie6~7 에서는 input 요소에 좌우 패딩값 이외에 상하 패딩값이 주어진 경우
    overflow:visible 을 하면 좌우 패딩은 해결되는데 상하 패딩이 해결이 안됩니다.
    심심해서 overflowe:hidden을 하니까 상하 패딩은 해결되고 다시 좌우 패딩이 커지는 문제가 있네요^^

  36. 정찬명 댓글:

    @어리서그나
    그런 문제 때문에 저는 상하패딩을 주지 않습니다. 대신 높이값을 부여하고 높이값과 동일한 높이의 line-height 값을 부여하면 텍스트가 수직 중앙 정렬이 되고 어느 브라우저에서나 동일하게 보입니다.

  37. 어리서그나 댓글:

    맞습니다. 저도 질문을 하고 나서 잠시 또 이것저것 해보다 높이값을 고정 시키니 찬명님의 말대로 되더군요…

    그런데 또 생각을 해보니 이렇게 높이값을 고정시키면 폰트크기를 가변 크기로 했을때 브라우저 상단의 크게 보기 등으로 사용자가 조정해서 본다면 조금 깨져 보일 수도 있겠네요.. 그래서 네이버에서는 아직도 폰트를 고정 px로 쓰고 있는듯 합니다. ^^

    암튼 늘 좋은 자료 많이 공유해 주셔서 감사드립니다.

  38. 태희 댓글:

    아 해답이 여기있군요
    overflow:hidden 만 죽어라 줘바도 안대고 해서 검색하다 ㅎㅎ

    6버전은 이상이없는데 7에서만 좌우가 벌어지는 현상이 발생해서 찾아다니고있었는데

    좋은 정보 감사합니다 ~

  39. 익명 댓글:

    감사합니다!!!!!!!!!!!

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님