ホームページ >ウェブフロントエンド >htmlチュートリアル >ie6 7_html/css_WEB-ITnose の入力ボックスとコンテナーの上端と下端の隙間をなくす

ie6 7_html/css_WEB-ITnose の入力ボックスとコンテナーの上端と下端の隙間をなくす

WBOY
WBOYオリジナル
2016-06-24 11:54:05961ブラウズ

このバグは非常に一般的です

    <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;
}

このとき、コンテナの高さが一定であるかどうかを確認します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。