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 中存在三个不需要的差异...

1. 左侧的标签 (#header-tabs) 全部集中在页面的右上角
2. 主要 Logo 、段落和图像 (#header-container) 向右缩进过多
3. 登录框和按钮错位

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

我已经阅读了几个不同的教程来解决最常见的 IE 问题，例如 float /双边距问题和宽度/填充框问题，但这并没有改变任何东西。

这是我的 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 还是所有ie 版本？ 注意 ie6 和早期的 ie7 版本不理解位置固定... more