css_html/css_WEB-ITnose のテキスト ボックスとボタンの位置ずれの解決策

最初に input タグのスタイルを設定します。コードは次のとおりです。

CSS コード

#text1{border: 1px 単色赤 ;高さ:20px;}

#button{background:#FFFFFF;color:blue;border:1px 単色 #000;height:24px;}

テキストフィールドの高さを 20px に設定し、ボタンの高さには次の値が必要です24pxに設定します。 IE 標準では通常どおりに配置されますが、Firefox ではテキストフィールドとボタンの高さがずらして表示されます。

このとき、input タグに left float (float:left) を設定することで Firefox に対応できます。 CSS コードは次のとおりです。

#text1{border:1px Solid #000 ;height:20px;float:left ;}

#button{background:#FFFFFF;color:#blue;border:1px Solid #000;height:24px;float:left;}

もちろん CSS を使用することもできますブラウザのパフォーマンスをより具体的に制御します。

概要: ボタンは高さの計算に常に Quirks モードを使用します。 Quirks モードでは、標準モードのように境界線が要素の外側ではなく、要素の幅内で計算されるため、テキストとボタンの両方に境界線を設定すると、ボタンの高さが要素の幅よりも小さくなる現象が発生します。文章。したがって、テキスト ボックスはボタンの位置に揃える必要があり、ボタンの高さはテキストの高さよりも高くする必要があります。 (ボタンの高さには境界線の高さが含まれますが、テキスト ボックスのテキストの高さには境界線の高さが含まれません。)