互聯網瀏覽器8和利潤率

我有一些非常簡單的html 這意味着做出如下佈局。互聯網瀏覽器8和利潤率

要下來從userbar我在Internet Explorer中使用
margin-top: 35px;
但是推標籤的標籤是完全地錯位（選項卡的頂部是在底部應）。

所以我需要使用margin-top: -50px;的Internet Explorer。

這是爲什麼，我該如何解決，而無需使用即特定的樣式表

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>

用CSS是

#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; 
}

來源

2011-01-31 Hailwood

IE不喜歡切緣陰性，它往往有差異。嘗試使用position來代替left,right,top和bottom - 從個人經驗來看，它更兼容。

您可以將整個頁面從邊距轉換爲定位，並進行微小的調整。

來源

2011-01-31 23:29:30 fiiv

默認情況下，我沒有使用負邊距，使用負邊距修正頂級問題，但是這需要僅用於樣式表。 – Hailwood 2011-01-31 23:31:28

然而，您對定位的評論起作用，將'position：relative`添加到pageHead，並將pageTabs樣式更改爲`position：absolute;底部：0;正確：0;`作品 – Hailwood 2011-01-31 23:33:23

儘量不要使用任何形式的html標籤。改用身體標記。此外，嘗試設置您的pageHead相對定位，然後通過相對或絕對位置其他div，並使用頂部，底部，左側，右側，如MT所述。

xD看起來我有點晚了。抱歉。：3

來源

2011-01-31 23:42:28 Squish

互聯網瀏覽器8和利潤率

回答

相關問題