Mozilla 한국 커뮤니티

윈도우의 ie.firefox 맥의 safari를 모두 테스트해보며 작업을 하고 있는데
문제점이 하나 발생했습니다.
ie에서는 checkbox나 radio 버튼에 자동으로 기본 여백이 주어지군요
그래서 버튼 오른쪽으로 텍스트가 2줄 이상 들어가는 경우 텍스트 정렬이 맞지 않는 현상이 발생 합니다.
ie 에 맞추면 firfox와 safari 두 브라우저에서는 텍스트가 밀려 보입니다.


예를 들면
() 1
2 <--- 이게 윈도우라면


()1
2 <-- firefox와 ie에서는 이렇게 보이게 되더라구요

지금으로서는 그냥 한가지 브라우저를 기본으로 잡고 한쪽으로만 맞추는 방법 밖에 없는건가 싶어서 답답한 맘에 글 올립니다...

해결 방안이 없을까요?

css를 이용해서 margin을 조절해보세요.
하지만 완전하지는 않을 것입니다.
여러 input 요소들은 여러가지 상황에 따라서 다양한 모습과 크기를 가지고 있기때문에 이미지처럼 딱 맞아 떨어지게 하는 것은 어렵습니다.
보편적으로 맞춰주는게 좋을 듯합니다.

사용자들은 그런 작은 차이에 신경을 쓰지는 않을테구요.
input 객체들의 모습이 동일하게 하려는 노력 보다는 <label>을 이용한 접근성등에 신경써서 유저빌리티를 높이는 것도 좋다고 생각합니다.