윈도우 브라우저별 border의 변화

점심을 먹고와서 우연히 CDK의 질문글을 보다가 나도 궁금해져서 실험을 해봤다.

실험인즉, 브라우저별로 border의 변화가 다를까? 라는 의문을 두고 실험을 했는데 예상처럼 모든브라우져가 조금씩 차이가 있었다.

총 8px의 굵기인 border 를 border-right 부분만 1px씩 줄여나가면서 변화를 지켜봤는데 변화과정이나 결과가 참 묘하군..

FireFox 2.0

8 By 8 FF border 8 by 8
8 By 7 FF border 8 by 7
8 By 6 FF border 8 by 6
8 By 5 FF border 8 by 5
8 By 4 FF border 8 by 4
8 By 3 FF border 8 by 3
8 By 2 FF border 8 by 2
8 By 1 FF border 8 by 1

IE6.0

8 By 8 IE border 8 by 8
8 By 7 IE border 8 by 7
8 By 6 IE border 8 by 6
8 By 5 IE border 8 by 5
8 By 4 IE border 8 by 4
8 By 3 IE border 8 by 3
8 By 2 IE border 8 by 2
8 By 1 IE border 8 by 1

Opera 9

8 By 8 Op border 8 by 8
8 By 7 Op border 8 by 7
8 By 6 Op border 8 by 6
8 By 5 Op border 8 by 5
8 By 4 Op border 8 by 4
8 By 3 Op border 8 by 3
8 By 2 Op border 8 by 2
8 By 1 Op border 8 by 1

DTD에 따라 달라질꺼라 생각되진 않고.. Opera브라우저가 Acid2 Test를 통과했으니 Opera의 랜더링 방식이 옳은걸지도 모르지만 모든 브라우저에서 동일하게 보이는 방법으로 우회해서 해야되지 않을까 싶네..

크로스 브라우징을 추구하면서 퍼팩트픽셀을 요구하는 사람들에게는 border의 표현 방식을 신중히 고려해서 작업해야하지 않을까 생각된다.

8 thoughts on “윈도우 브라우저별 border의 변화

  1. 윤 좌진 Post author

    저도 생각치도 못했던 부분이였고 물론 예전에 작업할때 봤던 사소한 1px의 부분이라고 생각됐던건데 돋보기로 확대해서 보니 속이좀 시원하네요 🙂

  2. 신현석

    아무래도 오페라의 결과가 가장 적절한 것 같죠? 저 특성 때문에 테이블에서 서로 다른 색의 보더를 사용할 경우 방향에 따라서 세로줄이나 가로줄이 깨끗하게 나오지 않을 수가 있습니다. 다른 색을 섞어서 사용할 때에는 이미지를 사용하는게 더 좋아요.

  3. 윤 좌진 Post author

    네.. 그렇군요 ^^
    사람들이 일반적으로 생각했을때라면 IE버전에서에 border-right:1px 이 맞을테지만 오페라의 렌더링방식이 정말 가장 맞는거라면 인식이 바뀌어야겠군요?
    border의 겹치는 우선순위를요 ^_^

  4. 기다림hiphapis

    오, 이런일이~
    저도 지금 프로젝트 진행하면서
    FF2, IE6, IE7, Opera, Safari 크로스브라우징 하면서 진행하는데..

    CSS, JS 랜더링되는게, 각자 차이가 있어서..
    승질날때가 많아요 ㅠ,.ㅠ

  5. 윤 좌진 Post author

    ㅎㅎ 그곳에 그분은 크로스브라우징에 관대하시다고 알고있는데요 ㅋㅋ 브라우저별로 똑같게 하기보다 브라우저고유의 랜더링을 더 존중하자 뭐.. 그런거요 ^^ 물론 기본적인 표준은 지키고나서 겠지만요 🙂

  6. hirameki

    확실히 차이가 역력하네요.
    그런데 저도 Opera의 결과를 보고 끄덕여지는건 왠일일까요.

    특히나 8X1의 경우는 오페라가 가장 올바른 결과를 보여주는거 같네요.

Comments are closed.