今日、divからinputsまですべてのスタイルを設定する汎用ボタンクラスを作成するときに遭遇した奇妙なバグ。input [type = submit]に関しては、ほとんどのブラウザが異なるボックスモデルを使用しているようです。
最近のほとんどのブラウザ（ie9 +、ff、chromeなど）は、間違いがなければボーダーボックスを使用する送信を除いて、すべての入力にコンテンツボックスボックスモデルを使用します。
基本的に、高さを100に設定し、パディングを10に設定すると、送信を除くすべての入力の高さは120になりますが、送信の高さは100になります。
これは、ボックスサイズとそのブラウザプレフィックスを使用して簡単に修正できます。しかし、私の問題は、同じことをするがボックスサイズ設定をサポートしていないIE6/7にあります...
これで、半分にカットされた送信を除いて、すべての入力がフルハイトで表示されます。条件付きコメントとは別に、コンテンツボックスまたは別の修正を強制するためにどのようなオプションが必要ですか？
IE の古い「壊れた」ボックス モデルは基本的にcontent-box. IE>5 では、IE がドキュメントを使用するにはドキュメントを quirks モードにする必要があります。次のいずれかを実行して、癖モードをトリガーできます ( wikipedia によると)。
もちろん、これは、すべてが IE ボックス モデルを使用することになるため、価値があるよりも多くの問題を引き起こす可能性があります ( content-box)。これは便利だと思いますが、レイアウトがこのように構築されていない場合、戻って変更するのはおそらく面倒です。
私はいくつかの検索を行いましたが、特定の要素で古いボックスモデルを有効にし、他の要素では無効にするものは見つかりませんでした.
過去に IE6/7 を扱ったことがありますが、条件付きコメントや css ハックなどを使用しない限り、IE6/7 のバグのある動作を回避する方法はありません。そのレンダリング エンジンは、他のブラウザーと比較して根本的に壊れています。ハックせずに動作させようとするのは、頭痛の種です。
私が考えることができる他の唯一のことは、各フォーム要素をスパンまたは div で囲み、それらを使用してフォーム要素のサイズを調整することです。これもひどいですが、少なくともすべてのブラウザーで動作するという利点があります。