IE中的CSS布局问题（带有图片和代码）

我想知道是否有人能帮我解决一些CSS问题，我遇到可怕的IE。这里是不想要的布局呈现的IE

下面是正确的布局（由Firefox和Chrome呈现）

你可以看到在IE中有三个不想要的区别

左边的标签（

#标题标签

）都集中在页面的右上角

主徽标、段落和图像（

#标题容器

）向右侧缩进过多

登录框和按钮未对齐

我已经阅读了一些关于修复最常见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:）

它是ie6特定的还是所有ie版本？

---

注意：ie6和早期ie7版本不理解位置固定…

问这个问题可能很愚蠢，但您的HTML验证了吗？你的CSS呢？我经常发现，当在不同的浏览器中遇到奇怪或意外的行为时，这是因为我在HTML/CSS中做了一些无效的事情。这可能不是您的问题，但可能值得快速检查

尝试以下代码

1） 更正登录框的对齐方式

HTML:

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

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

<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>

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

2） 将按钮精确放置在页面左侧的步骤

结束布局的标题部分后。引入一个新的容器名，id为#main_content{}

写下下面的代码

HTML:

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

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

<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>

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

---

我认为这是有效的。。。试试看。

你的CSS有点乱，而且没有HTML。。所以，要有人帮你解决这个问题还是相当困难的。还有，你已经试过什么了？真令人惊讶，IE的CSS问题！谢谢，我会调查的。有没有建议用在IE中具有相同效果的东西来替换position fixed？我想如果你想在屏幕上保留某些文本，你就必须使用javascript了。。。。或者没有声明doctype