フロートが原因で画像の位置がずれる

私のMacにウェブページを作成しました。 Chrome、FF、Safariなどの一般的なブラウザでテストしました。それは完璧です。 IEでウェブサイトをテストする機会がありました。それは悲惨なように見える - ロゴはあまりにも右に行った。私はそれが原因で起こっているフロートを信じています。私はここにいくつかのコードを掲示しています、ここで専門家から助けを得たいと思っています。 Plsは私を助ける。ありがとう！フロートが原因で画像の位置がずれる

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<style> 

    *{ 
margin:0px; padding:0px; 
font-family: Tahoma, sans-serif; 
font-size: 11px; 
    } 


    root { 
    display: block; 
    } 

    html, body, form, h1, h2, h3, h4, ul, li { 
margin: 0; 
padding: 0; 
    } 

    body { 
    margin: 0 auto; 
    text-align: center; 
    width:780px; 
    } 

    #top_bkg { 
    padding:0; 
    margin:0 auto; 
    background-color:#009933; 
    width:780px; 
    height:101px; 
    } 

    #top_bkg2 { 
    background-color:#009933; 
    width:780px; 
    height:99px; 
    } 


    #logo {  
    float:left; 
    line-height: 1%; 
    margin-top:-132px;    
background-color:red; 
    width:569px; 
    height:109px; 
background-repeat:no-repeat; 
background-position:bottom right; 
    } 

</style> 



    </head> 
    <body> 

     <div id="top_bkg"> 
     </div> <!--end of top_bkg--> 

     <div id="top_bkg2"> 
     </div> <!--end of top_bkg2--> 


    <div id="logo">    
    </div> <!--end of logo--> 


    </body> 
    </html>

これは、それはIEでどのように見えるかです：

The red background is supposed to be the logo. Its out of alignment.

出典

2012-05-14 schenker

'の代わりに' あなたはHTML5のdoctypeを指定しました。 –

こんにちは、ポストリンクをお願いしますか？私はマージンマイナスを使用する理由をいくつか疑問に思っていますか？あなたは幅の体を設定しますか？ – ShibinRagh

こんにちは、その唯一の私のlocalhostに現在。 – schenker

代わりに体に幅を設定するには、

<div id="wrapper"></div>のようなラッパーとラッパーの設定幅を作成することができ、かつマイナスの値に余裕を持たせるのも良い習慣ではなく、各divの幅と高さを設定していたので、なぜIEのように見えるのでしょうか？あなたはIEのための余白とパディングに関していくつかの修正を加える必要があるかもしれませんが、修正をしてください。

出典

2012-05-14 07:16:11 Shreedhar

ありがとうShreedhar。しかし、私のロゴを押し下げるために、私はマージンにマイナスの価値を与えなければなりませんでした。それを達成するための他の選択肢はありますか？ – schenker

top_bkg divの前にロゴdivを配置し、margin-topを正の値で指定します。 – Shreedhar

あなたはpositionを使用することもできます：relative;下：120ピクセル。ロゴの場合はhtmlを変更し、そのままの状態で保存してください。 – Shreedhar

フロートが原因で画像の位置がずれる

答えて

関連する問題