IE でテキストボックス <input type="text" /> を縦方向に並べる際、テキストボックスに margin:0 を指定しても、IE のバージョンによっては上下に余白ができることがある。
特に IE7 において顕著である。
※横方向に並べる際は問題ない。
※DOCTYPE を指定しないとバージョン間の差異はさらに増える
![IE7 textbox minus margin]()
そこで、<div> に font-size:12px を指定してみると、縦中央の余白も無くなる。
（理由は不明、高さ関係の計算で font-size が必要とか？）
<input> に対してではなく、それを包括する要素に指定するのがポイント
![IE7 textbox minus margin and font-size]()
[IE7 に対応した CSS]
クロスブラウザ対応で font-size の指定は意外と重要。
特に IE7 において顕著である。
※横方向に並べる際は問題ない。
具体例
[CSS]
div {
margin: 0;
padding: 0;
width: 120px;
/* 見易さのためのオプション */
background-color: #00ffff;
text-align: center;
}
div input {
margin: 0;
width: 50px;
border: 1px solid #000000;
}
※DOCTYPE を指定しないとバージョン間の差異はさらに増える
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 中略 -->
<div>
<input type="text" /><input type="text" /><br/>
<input type="text" /><input type="text" />
</div>
| IE11 IE8～10もほぼ同じ |
|
|---|---|
| IE7 |
解決手段
見た目どおり上下の余白を取り除くという発想で、<input> に "margin: -1px 0" を指定しただけでは、縦中央に余白が残る。そこで、<div> に font-size:12px を指定してみると、縦中央の余白も無くなる。
（理由は不明、高さ関係の計算で font-size が必要とか？）
<input> に対してではなく、それを包括する要素に指定するのがポイント
[IE7 に対応した CSS]
div {
margin: 0;
padding: 0;
width: 120px;
font-size: 12px;
/* 見易さのためのオプション */
background-color: #00ffff;
text-align: center;
}
div input {
margin: 0;
width: 50px;
border: 1px solid #000000;
}
/* IE7 のみ適用 */
*+html div input {
margin: -1px 0;
}
/* [おまけ] reset.css で記載する場合
* ※属性セレクタを使用するため、IE9.js などが必要
*/
*+html input[type=text] {
margin: -1px 0;
}
備考
<input> に padding:0 を指定すると、IE8 と IE9 でも上に余白ができるが、上記と同様に <div> に font-size を指定すれば無くなる。クロスブラウザ対応で font-size の指定は意外と重要。
0 件のコメント:
コメントを投稿