下記のコードは、ChromeとIEで異なる表示になります。

<div class="wholediv"> 
     <div class="rightdiv"> 
     <strong>Your Company Name</strong><br /> 
     Evergreen Terrace 742<br /> 
     Kansas Missouri<br /> 
     Phone: 432-653-3121<br /> 
     [email protected] </div> 
     <div class="sitemap"> 
     <a href="#">Home</a>&nbsp;|&nbsp;<a href="#">Sitemap</a>&nbsp;|&nbsp;<a href="#">Contact Us</a></div> 
     </div> 
</div> 

    div div.wholediv 
{ 
height:97px; 
width:500px; 
float:left; 
background-color:#F0F0F0; 
} 
div div.sitemap 
{ 
    background-color:#F0F0F0; 
    position:relative; 
    float:right; 
    width:200px; 
    height:87px; 
    padding-right:10px; 
    padding-top:10px; 
    font: 0.7em Tahoma, sans-serif; 
font-weight:bold; 
} 
div div.rightdiv 
{ 
float:left; 
position:static; 
background-color:#F0F0F0; 
width:200px; 
height:87px; 
padding-left:10px; 
padding-top:10px; 
font: 0.7em Tahoma, sans-serif; 
}

IEのように表示されます。 alt text このようなChromeディスプレイ。下記のコードは、ChromeとIEで異なる表示になります。

出典

2010-11-18 sly_Chandan

これは以前の質問より優れていますが、あまり有用ではありません。ライブリンク（JSFiddleまたは同様のものへのリンク）を投稿するか、または問題を詳細に記述してください*。さもなければ、人々は辛抱強くあなたのコードをコピーして貼り付けなければなりません - ほとんど何もするつもりはありません。 –

問題の説明が役立ちます。また、この小さなスニペットに完全に依存しない問題（例：周囲の要素やカスケードスタイルが追加される可能性があるため）をサンプルページに表示することもできます。 – akamike

ブロックレベルの要素には、幅と埋め込みの両方があります。これは、異なるボックスモデルのためにIEで問題を引き起こす少なくとも1つのことです。ボックスモデルについて

さらに詳しい情報：あなたが画像を追加http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

編集後：少なくとも位置：静的&位置：相対は、ここにあなたがそれらを使用している方法を必要とするべきではありません。要素からパディングを削除してデバッグを開始することができます。パディングはおそらくIEの "sitemap" -rowを破るものです。

あなたは、ロゴイメージなどを持つ部分をコードに含めないので、その部分にはコメントできません。あなたはボックスモデルについて読んでそれを適用すべきだと思います。また、位置が使用される方法はかなりランダムに見えるので、少し勉強することができます。位置情報について詳しくはhttp://www.quirksmode.org/css/position.html

出典

2010-11-18 10:45:49 Marcus

Dreamweaver CS8は私の問題を解決しますか？ブラウザの互換性チェックがありますか？ –

Adobeはまだ未来への未来を予測していません... – BoltClock

@Chandan KhatwaniはDreamweaverを取り除き、HTMLを自分で書く方法を学びます。 –

下記のコードは、ChromeとIEで異なる表示になります。

答えて

関連する問題