IE浏览器中的CSS布局问题（附图和代码）

我想知道是否有人可以帮我解决我遇到的一些可怕的IE浏览器遇到的CSS问题。下面是为渲染通过IE不需要的布局......IE浏览器中的CSS布局问题（附图和代码）

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

，这里是正确的布局（火狐和Chrome的渲染）...

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

，你可以看到有在IE中有三种不希望的区别...

左边的标签（#header-tabs）将所有聚集在右上角o F中的页面
的主要标志，段落和图像（#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 :)

来源

2009-08-09 BeachRunnerFred

你的CSS最终会变得一团糟，并且没有HTML ..所以对于某人来说，你仍然很难找到它。另外，你已经尝试过了什么？ – Thorarin 2009-08-09 19:58:04

多么惊喜，用IE浏览器的CSS问题！ – Imagist 2009-08-11 11:23:19

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

来源

2009-08-09 19:57:02 redsquare

谢谢，我会研究这个。任何建议替换位置固定的东西，将在IE中有相同的效果？ – BeachRunnerFred 2009-08-09 19:59:44

我想你一直在使用JavaScript，如果你想保持屏幕上的某些文字。 – Scharrels 2009-08-09 20:01:34

@Scharrels，谢谢！你能多解释一下吗？ – BeachRunnerFred 2009-08-09 20:06:37

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

来源

2009-08-09 21:03:20 jkupferman

...或未声明文档类型 – 2009-08-10 04:25:19

请尝试下面的代码。

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

我想这样的作品...只是尝试一下。

来源

2009-08-11 11:20:26

IE浏览器中的CSS布局问题（附图和代码）

回答

相关问题