IE瀏覽器中的CSS佈局問題（附圖和代碼）

Question

我想知道是否有人可以幫我解決我遇到的一些可怕的IE瀏覽器遇到的CSS問題。下面是爲渲染通過IE不需要的佈局......

alt text http://beeeph.squarespace.com/storage/images/misc/ielayout.jpg

，這裏是正確的佈局（火狐和Chrome的渲染）...

alt text http://beeeph.squarespace.com/storage/images/misc/correctlayout.jpg

，你可以看到有在IE中有三種不希望的區別...

1. 左邊的標籤（#header-tabs）將所有聚集在右上角o F中的頁面
2. 的主要標誌，段落和圖像（#header-container）獲得縮進太遠向右
3. 登錄框和按鈕都錯位

alt text http://beeeph.squarespace.com/storage/images/misc/ielayoutdifferences.jpg

我已經通過閱讀幾個不同的教程來解決最常見的IE問題，比如浮動/雙邊距問題和寬度/填充框問題，但這並沒有改變任何東西。

這裏是我的CSS代碼...

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 

/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
} 

/* my styles */ 

body { 
    /*margin-left:auto; 
    margin-right:auto;*/ 
    padding-bottom:20px; 
    width:100%; 
    color:#666666; 
    font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; 
    font-size:62.5%; 
    /*line-height:185%;*/ 
} 

#header-navbar { 
    background:#000000 none repeat scroll 0 0; 
    height:50px; 
    line-height:50px; 
    border-top:2px solid #FFFFFF; 
    width:100%; 
} 

#header-toplinks { 
    color:#FFFFFF; 
    line-height:50px; 
    padding-left:44px; 
} 

#header-toplinks a{ 
    border-bottom:1px solid #38373A; 
    color:#FFFFFF; 
    font-weight:bold; 
    text-decoration:none; 
} 

#header-toplinks a:hover{ 
    color:#9E9B9B; 
} 

#header-toplinks ul, li{ 
    display:inline; 
    float:left; 
} 

#header-login { 
    float:right; 
    height:12px; 
    padding:3px 5px 0px 0px; 
    line-height:50px; 
    text-align:left; 
} 

.form-search .text { 
    border-bottom:1px solid #CCCCCC; 
    border-left:1px solid #CCCCCC; 
    border-top:1px solid #CCCCCC; 
    height:18px; 
    margin-bottom:8px; 
    vertical-align:middle; 
    width:100px; 
    color:#AAAAAA; 
} 

.form-search .search-button { 
    background:#999999; 
    border:medium none; 
    font-size:1em; 
    height:18px; 
    margin-bottom:8px; 
    margin-left:-2px; 
    text-transform:uppercase; 
    vertical-align:middle; 
    width:52px; 
} 

#header-tab_projects{ 
    float:left; 
    left:0; 
    position:fixed; 
    top:105px; 
    z-index:50; 
} 
#header-tab_blog{ 
    float:left; 
    left:0; 
    position:fixed; 
    top:275px; 
    z-index:50; 
} 

#header-container { 
    padding-top:50px; 
    padding-left:100px; 
    width:100px; 
} 

#header-container p { 
    color:#AAAAAA; 
    text-align:left; 
    line-height:20px; 
    font-size:1.3em; 
    margin-top:25px; 
    margin-bottom:25px; 
    width:500px;  
} 

.portrait img { 
background:#EFEFEF none repeat scroll 0 0; 
border:1px solid #EEEEEE; 
margin-bottom:5px; 
padding:5px; 
text-align:center; 
} 

#footer { 
    padding-top:20px; 
    padding-left:100px; 
    width:100%; 
} 

*更新：當我刪除position: fixed與position: absolute取代它，它解決的問題＃1和＃2 :)

Answer 1

它是IE6或特定所有版本？ 注ie6 &早ie7版本不明白位置固定... more

Answer 2

這可能是愚蠢的問，但你的HTML驗證？你的CSS呢？我經常發現，在不同瀏覽器中遇到奇怪或意外的行爲時，這是因爲我在HTML/CSS中做了無效操作。這可能不是你的問題，但它可能值得快速檢查

Answer 3

請嘗試下面的代碼。

1）更正登錄框的對齊方式。

HTML：

<div id="header-navbar"> 
<div id="header-login">login content goes here</div> 
</div> 

CSS：

#header-navbar { 
background:#000000 none repeat scroll 0 0; 
height:50px; 
line-height:50px; 
border-top:2px solid #FFFFFF; 
width:100%; 
position:relative; 
} 

#header-login { 
position:absolute; 
height:12px; 
top:3px; 
right:5px; 
text-align:left; 
color:#FFFFFF; 
} 

2）爲了精確地放置該按鈕的頁面

的左側結束的頭部分後佈局。引入一個新的容器名稱id爲#main_content {}

寫下面的代碼。

HTML：

<div id="main_content"> 
<div id="tab_projects">insert the project tab image</div> 
<div id="tab_blog">insert the blog tab image</div> 
<div id="content">some content goes here</div> 
</div> 

CSS：

#main_content{ 
position:relative; 
text-align:left; 
} 

#content{ 
padding:0 0 0 50px; 
} 

#tab_projects{ 
position:absolute; 
top:10px; /* adjust the top position according to your design */ 
left:0px; 
} 

#tab_blog{ 
position:absolute; 
top:50px; /* adjust the top position according to your design */ 
left:0px; 
} 

我想這樣的作品...只是嘗試一下。