CSSマージンの問題

編集：私の質問は明確ではなかったので、これを明確にするだけです。CSSマージンの問題

20px左余白で合計20pxが移動しますが、入力コントロールは合計40px移動しているようです。

元の質問：

次のスクリプトは、スクリプト全体で、私は以下のスクリプトに取り付けた他のスクリプト/スタイルがありません：私は20ピクセルのマージンを追加するときに、何らかの理由で

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Untitled Page</title> 
    </head> 
    <body> 
     <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;"> 
      <input type="text"/> 
     </div> 
     <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;"> 
      <input type="text" /> 
     </div> 
     <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;"> 
      <input type="text" /> 
     </div> 
    </body> 
</html>

をこれらのdivタグのいずれかの左に何らかの理由で、すべてのdivを20ピクセル右に移動するだけでなく、divタグ内の入力フィールドをdivタグ内の右側に移動します。なぜ起こっていることを

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Untitled Page</title> 
    </head> 
    <body> 
     <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 20px;border:1px black solid;"> 
      <input type="text"/> 
     </div> 
     <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;"> 
      <input type="text" /> 
     </div> 
     <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;"> 
      <input type="text" /> 
     </div> 
    </body> 
</html>

：たとえば

？

Internet Explorer 7モードでInternet Explorer 8でテストしています。標準のInternet Explorer 8モードを使用してInternet Explorer 8でテストしましたが、完全に動作します。

出典

2011-01-31 oshirowanen

これは、ダブルフロートマージンバグの奇妙な表現のようです。最初のdivのstyle属性にdisplay: inlineを入れると、古いバージョンのIEでは余白が倍増しなくなります。

しかし、他の人が言っているように、私はクラスを作成します。それは物事をより穏やかに保ちます。

出典

2011-01-31 17:17:57

+1 "IEの古いバージョン"ユーザーのために、このトリックを覚えています。 – codea

マージンの仕組みを理解していないようです。 MS Wordなどのテキストドキュメントに左余白を追加すると、用紙の内容が余白だけ右に移動し、ページの端から離して配置されます。

CSSの要素に左余白を追加すると、同じ基本的なことが実行されます。あなたは、それがページの端であろうと他のdivであろうと、ブロックレベル要素から左へのn個のスペースがあることをブラウザに指示しています。マージンを追加した要素の内容はすべて、親に対して相対的な位置を保持します。あなたの場合はdivが動いたときにinputが動くことを意味します。

また、それだけで転写問題がある可能性がありますが、あなたはあなたが言及したようにを残していないに、最初divの下に20のピクセルの余白を追加しました。

出典

2011-01-31 14:26:11 coreyward

私はそれがInternet Explorer 7のバグ、またはインターネットエクスプローラ7のInternet Explorer 7モードのバグだと思います。divタグに20ピクセルの余白を適用すると、divタグはexpertedとして動きますが、入力コントロールdivボックス内の20ピクセル右に移動します。したがって、基本的にdivは合計20px移動し、入力コントロールは合計40px移動します。 – oshirowanen

@oshirowanen - coreywardが示唆しているように誤解ではない場合はおそらくバグです。現代のブラウザでこれをテストしましたか？ – Rob

@oshirowanen - Real IE7も同じことをしています。バグは ' ...'を入力タグの周りに置くことで回避できます。 – Alohci

答えて

関連する問題