3

次の簡単な例を試してください。

<html>
<head>
<style>
  div,
  input {
    border: 1px solid #000;
    margin: 2px;
    padding: 3px;
    width: 100px;
  }
</style>
</head>
<body>
  <div>div</div>
  <input value="input" />
</body>
</html>

div と入力の幅が異なることに注意してください。実際、入力の幅は 92px です。入力について、Firefox は、IE がすべてに対して行うのと同じ方法で、ボーダーとパディングの外側の幅を計算します。入力要素を他のすべてと同じように扱い、幅にパディングとボーダーを追加するべきではありませんか?

4

2 に答える 2

3

phihagが言うように、それはブロック対インラインです。

ただし、あなたの例の欠陥: DOCTYPE を使用していません。

つまり、ブラウザは自由にレンダリングできるということです。

一番上に固執<!DOCTYPE html>して、ブラウザが Quirks モードに入るのを防ぐ、素晴らしくコンパクトな HTML5 DOCTYPE を使用します。

于 2009-02-24T23:18:38.507 に答える
2

幅の問題は、脳死の IE 互換の互換モードの結果です。解決策については、Peter Boughton の回答 (doctype) を参照してください。

さらに、divはブロック レベルの要素ですが、inputそうではありません。display:block;ルールに追加して、両方のケースで div レンダリングを実現するかdisplay:inline;、両方の要素をインラインとしてフォーマットします。ただし、Firefox はトップレベルのインライン要素を許容し、適切にレンダリングします。

于 2009-02-24T23:14:07.817 に答える