IEのCSSレイアウトの問題（写真とコード付き）

Question

恐ろしいIEで動いているいくつかのCSSの問題のトラブルシューティングを誰かが手伝ってくれるかどうか疑問に思っていました。ここではIEによってレンダリングとして望ましくないレイアウト...

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

だとここ（のFirefoxとChromeでレンダリングされたとして）正しいレイアウトだ...

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

あなたがそこにある見ることができますIEの3つの望ましくない差異...

1. 左のタブ（#header-tabs）は、すべて右上のoページfを
2. メインロゴ、段落、および画像（#header-container）は右
3. にすぎログインボックスとボタンをインデント取得
私が通過読んだ

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

ずれていますfloat/double-margin問題やwidth/padding box問題など、よくある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特定またはですすべてのバージョン？ &早期IE7のバージョンでは、固定位置を理解していない 注意IE6 ... 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）のヘッダ部分を終了した後、正確にページ

の左側のボタンを配置するにはレイアウト。新しいコンテナ名を#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; 
} 

私はこれがうまくいくと思う...ちょうどそれを試してみてください。