ホームページ >ウェブフロントエンド >htmlチュートリアル >ie6 7_html/css_WEB-ITnose の入力ボックスとコンテナーの上端と下端の隙間をなくす
このバグは非常に一般的です
<div id="wrap"> <input type="text" /> </div>
*{ margin: 0; padding: 0;}input{ height: 19px; line-height: 19px; padding: 11px 0 11px 10px; width: 192px; font-size: 16px;}#wrap{ border: 1px solid red;}
ff,ie8 コンテナと入力境界が重なっています
ie7
ie6
どうやって解決しますか?インターネット上では、float:left を入力に追加するだけで実際に余白をなくすことができると言っている人がたくさんいますが、多くのバグは float によって引き起こされており、さらに多くのバグがあるため、IE ではレイアウトがまったく異なってしまう可能性があります。浮遊物を除去します。
フロートは諸刃の剣ですので、できれば使用しないでください。
最後の方法
最初の入力 {border:0;*margin:-1px 0;}、この時点では、ie7 にはまだスペースがあります。次に、
input[type="text"] {
background: nonerepeatscroll 0 0 transparent;
border:medium none;
}
このとき、コンテナの高さが一定であるかどうかを確認します。