Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

ブラウザ間でインプットやチェックボックスの表示がズレるのを自分なりに修正した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:"MS Pゴシック", 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; 
}
kbyay_
メモ書きと覚書き。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away