インターネットエクスプローラ8とマージン

Question

私はかなり簡単なhtmlを持っています これは以下のようなレイアウトを作ることを意図しています。

ダウン私はしかし、Internet Explorerでタブがcompletlyずれている
margin-top: 35px;
を使用していますuserbarからタブをプッシュする（底がどこにあるべきか、タブの上部があります）。

インターネットエクスプローラにはmargin-top: -50px;を使用する必要があります。

それは、なぜこれがあるとどのように私はCSSはIEが負のマージンを好きではない

#pageHead { 
    height: 100px; 
} 

#pageLogo { 
    float: left; 
    width: 149px; 
    height: 77px; 
    margin-top: 11px; 
    background: transparent url('../images/logo.png') no-repeat; 
} 

#userBar { 
    text-align: right; 
    color: #fff; 
    margin-top: 10px; 
} 

#userBar a:link, 
#userBar a:visited, 
#userBar a:active { 
    font-weight: normal; 
    color: #E0B343; 
    text-decoration: none; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

#pageTabs { 
    float: right; 
    margin-top: 35px; 
} 

#pageTabs ul { 
    position: relative; 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border-left: 1px solid #000; 
} 

#pageTabs ul li { 
    float: right; 
    background: url(../images/tabsBg.png) no-repeat 0% 0%; 
    border-left: 1px solid #000; 
    margin-left: -1px; 
} 

#pageTabs ul li a:link, 
#pageTabs ul li a:visited, 
#pageTabs ul li a:active { 
    color: #fff; 
    background: url(../images/tabsBg.png) no-repeat 100% 0%; 
    display: block; 
    font-size: 14px; 
    font-weight: bold; 
    line-height: 42px; 
    text-transform: uppercase; 
    padding: 4px 32px; 
    text-decoration: none; 
} 

#pageTabs ul li a:hover, 
#pageTabs ul li a:focus { 
    text-decoration: underline; 
} 

Answer 1

された状態で、すなわち、特定のスタイルシート

layout example http://webspirited.com/layout.png

<div id="pageHead"> 
    <div id="userBar"> 
    <span class="bold">Hi Matthew Hailwood | <a href="#">Logout</a> 
    </div> 
    <a href="http://localhost/buzz/" id="pageLogo"></a> 
    <div id="pageTabs" class="clearfix"> 
    <ul> 
     <li><a href="http://localhost/buzzil/templates">Templates</a></li> 
     <li><a href="http://localhost/buzzil/messaging">Messaging</a></li> 
     <li><a href="http://localhost/buzzil/contacts">Contacts</a></li> 
    </ul> 
    </div> 
</div> 

を使用せずにそれを修正することができます矛盾する傾向があります。 left、right、top、bottomと一緒にpositionを使用してください。これは個人的な経験からより互換性があります。

ページ全体を余白からマイナーチェイクの位置に変換することができます。

Answer 2

どのような種類のスタイリングでもhtmlタグを使用しないでください。代わりにbodyタグを使用してください。 また、pageHeadを相対位置に設定してから、他のdivを相対または絶対位置で配置し、MTのようにtop、bottom、left、rightを使用してください。

xD私は少し遅れたようです。ごめんなさい。 ：3