input 박스에는 여러가지가 있습니다. (라디오,체크박스,텍스트박스등)
여기에서 라디오 박스와 체크박스는 IE와 타브라우저에서 외곽여백의 차이가 있습니다.
이런경우를 잘모르는 웹디자이너 같은 경우 무조건 자기디자인 데로 해달라고 요구하곤하죠.. 그것도 익스에만 맞춰달라면서...참피곤한 경우죠. 물론 디자이너 입장에서는 그게 정답이고, 퍼블리셔 입장에서 맞춰주는것도 해야할일중에 하나일수는 있습니다. 그래서 협업이 중요한거 같습니다.
여튼 이럴때 해결방법입니다.
먼저 소스를 살펴보겠습니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 input 박스테스트</title>
<style type="text/css">
body {font:12px "돋움", Dotum;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" /><label for="test">테스트</label>
</form>
</body>
</html>
위와 같은 소스를 출력하면 다음과 같습니다.
익스와 파폭,사파리는 기본적으로 4px 이라는 외곽여백이 존재하며, 오페라는 3px 여백이 있었습니다.
세로여백은 top 라인에서 익스는 2px, 파폭과 사파리는 3px, 오페라는 0px 여백이 있었습니다. (여기서 사파리는 버전이 4입니다.)
그럼 여백을 초기화 해보기로 합시다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 input 박스테스트</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px "돋움", Dotum;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" /><label for="test">테스트</label>
</form>
</body>
</html>
여기에서 초기화 방법도 여러가지겠지만, 저는 테스트로 * 를 사용했습니다.
body, table, div, input {margin:0; padding:0;} 이런식으로 해줘도 됩니다. 어떤방법이던간에 중요한건 input 에 여백을 0 으로 만드는겁니다.
익스를 제외하고 타브라우저에서는 여백이 줄어든걸 볼수있습니다. (역시 익스는 끄덕없습니다. 어쩔~ -.-)
input 에 여백을 주지 않을경우는 많은 차이가 없었지만, 여백을 0 으로 하니 브라우저마다 보여지는 차이가 커졌습니다.
그럼 이걸 어떻게 맞출까? 방법은 여러가지 겠지만 class 로 input 에 직접 적용해보겠습니다. (물론 여백은 0 으로 했을때 입니다.)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 input 박스테스트</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px "돋움", Dotum;}
.input_m {width:13px; height:13px; vertical-align:middle;}
label {position:relative; top:1px;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" class="input_m" /><label for="test">테스트</label>
</form>
</body>
</html>
가로 여백(1px) 은 익스와, 파폭, 사파리가 동일하고, 오페라는 2px 벌어졌습니다. 그리고 세로 여백은 사파리를 제외하고 모두 동일해졌습니다.
너무 붙어있는거 같으니, 조금 여백을 주도록하겠습니다.
.input_m {width:13px; height:13px; margin-right:4px; vertical-align:middle;}
사파리에서 약간의 차이가 있긴하네요. 이래서 핵이 필요한가 봅니다. -.-
위처럼 했는데도 디자이너가 모든브라우저에서 확인후 "어 사파리에서 텍스트가 조금 올라겠네요?" 라고 태클을 걸어온다면, 깔끔하게 핵을 써주세요. (체크와 라디오박스에서 핵사용없이 1px 오차도 없게 하는 방법이 있으면 알려주세요.)
다른방법으로는 * {margin:0; padding:0;} 을 준상태에서 익스만 여백이 그대로이기때문에 익스만 margin-right:-4px 로 주는 방법도 있긴합니다. (익스전용 핵을 사용해야겠죠)
어떻게 초기 구조화를 할건지는 제작할 사이트의 특성을 보고 판단하시기 바랍니다. ex) input 전체에 적용할것인가, 아님 class로 뺀후 부분부분만 적용을 할것인가... (차후에 유지보수할때 쉬운쪽으로..)
만족된 결과는 아니지만, 확인해보시고 또 다른 좋은 방법이 있으면 알려주세요.^^; (공유합시다.)
추가 : 위와 같이 할경우 텍스트 필드일경우는 저 class 적용을 안하시면 됩니다. 만약에 전체에 적용을 하셨다면, 텍스트 필드 스타일에 !important 로 우선순위를 먼저 두셔도 되구요^^
