브라우저 경계를 넘어 탐색

겉으로는 대단한 주제 같지만, 이 글은 저처럼 배가 아픈 사람들의 소일거리라고 할 수 있겠네요~ 보통 개발자들에게는 각자의 휴식 방법이 있습니다. 포럼에서 어떤 xd님이 국경에 관한 질문을 하신 것에서 유래해서 알아보기로 했습니다. 글을 쓰는 데는 그리 오랜 시간이 걸리지 않았지만, 사진을 준비하는 데는 오랜 시간이 걸렸습니다. 이 글에서는 각 브라우저가 테두리를 어떻게 이해하는지 살펴보겠습니다.

이번 테스트에 참여하는 브라우저에는 Windows 기반의 거의 모든 브라우저(ie6, ie7, ie8, ie9preview, chrome, firefox, safari, Opera, seamonkey)가 포함됩니다. 각 버전은 인터넷에서 다운로드한 최신 버전입니다. 그리고 이번 테스트에서 IE678의 성능은 일관되었고, firefox와 seamonkey는 족벌주의적이어서 IE8과 firefox로 병합하게 되었습니다. 아래 그림은 이 브라우저의 스크린샷입니다.

위 순서는 의도적인 것입니다. 그 이유는 아래 테스트에서 보여드릴 예정이며, 스크린샷도 이 순서대로 정리되어 있습니다.

먼저 아래 그림을 보세요. 20X20 DIV가 6개의 브라우저에 표시되며, 위쪽 테두리는 2px이고 나머지는 1px입니다. 차이는 없는 것 같습니다. 1px의 미묘함이 우리의 주의를 방해하기 때문입니다. (사실 이 부분은 크게 신경쓰실 필요는 없습니다~)

먼저 문제를 단순화하면 한 변은 2px, 세 변은 1px이고 결과를 5배로 확대하면 이 차이를 확실히 알 수 있습니다. Opera와 Safari는 반대이고 IE8은 팔과 다리가 없으며 다음 세 사람은 일관성이 있습니다. 3의 두 번째 행은 교차점에서 점진적인 효과를 나타냅니다.

아마도 이 효과를 더 눈에 띄게 만들어야 할 것 같습니다. 한 면만 굵게 표시(10px)하면 IE8의 특징이 확연히 드러납니다. 오페라와 사파리는 여전히 상대적이다. 다음 세 가지 공동전선은 점차 더욱 분명해집니다.