inputのズレを揃えるCSSまとめ

ブラウザ間でインプットやチェックボックスの表示がズレるのを自分なりに修正したCSSのまとめメモ。

ちなみにIE6ではinput[type="text"]や、input[type="checkbox"]の標記が無効？のようだったので、もしやんごとなき事情でIE6に適用させるためにはチェックボックスやラジオに対して別途クラスを当てる必要。

・buttonには overflow:visible;を入れる。

・vertical-alignを指定する

・positionをrelativeにして、高さを相対的に揃える（topは各フォントサイズにより変更する）

・font-familyに日本語フォントを指定する

　
　
こんな感じで書くと書くブラウザでズレが軽減されます。

css

body, form {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
}

select, input, textarea, button { 
     vertical-align:middle; 
     font-family:"ＭＳ Ｐゴシック", arial, helvetica, clean, sans-serif; 
     position:relative; 
     margin: 0 4px 2px 0;
     *margin-right:3px; 
     top:-1px;  
}

input { 
     height: 16px; 
     line-height: 16px; 
}

button, input[type="button"] {
     overflow:visible; 
     height:22px;
     padding:0 3px;
}

select { 
     height: 20px; 
     line-height: 20px;
}

input[type="checkbox"],
input[type="radio"] { 
     border:none; 
     top:-2px;
     top:0\9;
     margin-right:2px; 
     margin-right: 0\9; 
}