10

ボックスモデルがあるのに対し、ボックスモデルが<input type="submit"/>あることに気付きました。この動作は、IE8 および FF に存在します。残念ながら、これにより、均等なサイズの入力にこのスタイルを適用できなくなります。border-box<input type="text"/>content-box

input, textarea
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

これは IE と FF による正しい動作ですか? そして、この問題を回避するクロスブラウザの方法はありますか?

4

4 に答える 4

17

これは IE と FF による正しい動作ですか?

フォーム フィールドの装飾が CSS によってどのように制御されるかについては、標準では実際には述べられていません。もともと、これらは OS ウィジェットとして実装されていました。その場合、ボーダー ボックスのサイズ変更は理にかなっています。後のブラウザは、CSS ボーダー/パディングなどを使用してウィジェット自体をレンダリングするように移行しました。その場合、コンテンツ ボックスのサイズ変更は理にかなっています。一部のブラウザー (IE) は、フォーム フィールドを両方の組み合わせとしてレンダリングします。つまり、選択ボックスがテキスト フィールドと並んでいない状態になる可能性があります。

そして、この問題を回避するクロスブラウザの方法はありますか?

あなたができる最善の方法は、CSS3 を使用して手動で必要なサイズをブラウザーに伝えることです。

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

(quirks または互換モードの場合、IE6/7 または IE8 では動作しません。)

于 2009-09-20T09:19:17.400 に答える
1

この問題を解決するには、2 つのオプションがあります。1) 入力用の CSS コードを記述する場合、すべての入力要素に適用されます。

入力[タイプ="送信"],入力[タイプ="テキスト"]
{
    境界線: 5px ソリッド #808080;
    パディング:0px;
    背景色:#C0C0C0;
    幅:20em;
}

2)既知のタグ名をリセットした後は、常にクラス宣言を使用します。

.MySubmit
{
    境界線: 5px ソリッド #808080;
    パディング:0px;
    背景色:#C0C0C0;
    幅:20em;
}

そしてそれを次のように使用します

<input type="submit" class="MySubmit" />

これが役立つことを願っています。

于 2009-09-20T09:05:10.887 に答える
0

それにはcssのみの修正があります

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0;  padding:0 15px 0 15px; }
/*ie9*/ div.search input[type="text"] {   border-left: 25px solid transparent; }
/*ie8*/ div.search input[type="text"] {   border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;}

ありがとうムハンマド・アティフ・チュグタイ

于 2013-03-14T11:54:46.347 に答える