Question

我想知道是否有人可以帮助我解决一些CSS问题，我正在遇到可怕的IE。这是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中有三个不受欢迎的差异......

左侧标签（#header-tabs）在页面的右上角聚集在一起
主徽标，段落和图片（#header-container）缩进得太远了
登录框和按钮未对齐

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特定版本还是所有ie版本？注意ie6＆amp;早期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;
}

我觉得这很有效......试试吧。

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

3 个答案: