My problem: I just coded a website that is styled just fine in chrome and firefox. However in internet explorer(9) it breaks. the gray header background is supposed to be pushed up to the right of the logo block, and the buttons are supposed to be in the dark grey area. I posted my code. I'm no expert at css, any tips would be greatly appreciated. (the second image is displaying the desired result)
我的问题：我刚刚编写了一个在chrome和firefox中设置得很好的网站。但是在Internet Explorer（9）中它会中断。灰色标题背景应该被推到徽标块的右侧，按钮应该是在深灰色区域。我发布了我的代码。我不是css的专家，任何提示都会非常感激。 （第二张图像显示所需的结果）
the html: Website
html：网站
</head>
<body>
<div class="wrap_overall">
<div class="header">
<a href="http://localhost">
<img class="logo" src="http://localhost/images/logo.png" width="175" height="24" alt="weblogo" />
</a>
</div>
<div class="headerbg"></div>
<!-- nav top highlight -->
<div style="background-color:#6c6c6c;margin:9px0px0px;height:1px;width:1020px;z-index:1;"></div>
<!-- nav bar -->
<div style="background-color:#5a5a5a;height:53px;width:1020px;z-index:1;"></div>
<!-- nav bottom frame -->
<div style="background-color:#d4e6b6;height:13px;width:1020px;z-index:1;border-top:4px solid #9de629; margin:0px 0px 10px;"></div>
<div class="nav_main">
<ul>
<li> <a href="http://localhost/button1">
<img src="http://localhost/images/button1.png" width="63" height="18" alt="button1" />
</a> </li>
<li> <a href="http://localhost/index.php?page=button2">
<img src="http://localhost/images/button2.png" width="59" height="18" alt="button2" />
</a> </li>
<li> <a href="http://localhost/index.php?page=button3">
<img src="http://localhost/images/button3.png" width="62" height="18" alt="button3" />
</a> </li>
<li> <a href="http://localhost/index.php?page=button4">
<img src="http://localhost/images/button4.png" width="41" height="18" alt="button4" />
</a> </li>
<li> <a href="http://localhost/index.php?page=button5">
<img src="http://localhost/images/button5.png" width="73" height="18" alt="button5" />
</a> </li>
</ul>
</div>
</div>
</body>
</html>
the css:
css：
.logo
{
padding:60px 20px 50px 20px;
}
body
{
background-color:#282828;
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
body a, img{ border-style:none; color:#9de629; text-decoration:none;}
body a:visited {color:#9de629;}
body a:hover{ color:#FFFFFF; text-decoration:underline;}
.wrap_overall
{
position:relative;
width: 1020px;
margin:0px auto;
}
.header
{
width:216px;
height:148px;
margin:0px 0px;
padding:0px 0px;
background-color:#252525;
float:left;
display:inline;
}
.headerbg
{
margin:0px 0px 0px;
padding:0px 0px;
width:1020px;
height:148px;
background-color:#c7c7c7;
}
.nav_main/*holds the buttons*/
{
margin:0px 0px 1px 0px;
padding:0px 0px 0px 0px;
position:absolute;
top:148px;
left:363px;
z-index:2;
overflow: hidden;
}
.nav_main ul
{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
overflow: hidden;
}
.nav_main ul li
{
margin:0px 0px 0px 0px;
display: inline;
float: left;
}
.nav_main ul li a
{
outline: none;
border:none;
margin:0px 0px 0px 0px;
margin-right:-10px;
height:54px;
width:125px;
color:#FFFFFF;
background-image:url(../images/button.png);
text-align:center;
display:table-cell;
vertical-align:middle;
}
.nav_main ul li a:hover
{
background-image:url(../images/buttonlight.png);
}
1 个解决方案
#1
1
Your problem is positioning and scoping. your nav_main content should be within the scope of it's container. currently you are attempting to position many different element independently but make them look "attached", which is basicly impossible.
你的问题是定位和范围。您的nav_main内容应该在其容器的范围内。目前你试图独立定位许多不同的元素，但让它们看起来“附加”，这基本上是不可能的。
I'll offer you an example:
我会举个例子：
<div id="header">
<div id="nav-bar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
</div>
</div>
This is a more appropriate layout for your header area. Example CSS may follow this logic:
这是标题区域的更合适的布局。 CSS示例可能遵循以下逻辑：
#header { background-color: grey; width: 40% height: 200px; position: relative; top: 0; right: 0; } // top and right values depend on wrapper container
#nav-bar { background-color: darkgrey; width: 100%; height: 40px; position: relative; bottom: 0; left: 0; }
#nav-bar ul { position: absolute; bottom: 0; right: 0; }
/* Style your #nav-bar ul li stuff here */
Semantics lesson edit: try to avoid using inline styles as much as you can :)
语义课程编辑：尽可能避免使用内联样式:)
To Clarify
In IE8 and below, positioning of elements was not on par with the standard of the good browsers, so with your stuff all scoped improperly and the use of absolute positioning, you're bound to get these problems.
在IE8及以下版本中，元素的定位与优秀浏览器的标准不相上下，因此，如果你的东西都是不正确的，并且使用绝对定位，那么你一定会遇到这些问题。
#1
1
Your problem is positioning and scoping. your nav_main content should be within the scope of it's container. currently you are attempting to position many different element independently but make them look "attached", which is basicly impossible.
你的问题是定位和范围。您的nav_main内容应该在其容器的范围内。目前你试图独立定位许多不同的元素，但让它们看起来“附加”，这基本上是不可能的。
I'll offer you an example:
我会举个例子：
<div id="header">
<div id="nav-bar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
</div>
</div>
This is a more appropriate layout for your header area. Example CSS may follow this logic:
这是标题区域的更合适的布局。 CSS示例可能遵循以下逻辑：
#header { background-color: grey; width: 40% height: 200px; position: relative; top: 0; right: 0; } // top and right values depend on wrapper container
#nav-bar { background-color: darkgrey; width: 100%; height: 40px; position: relative; bottom: 0; left: 0; }
#nav-bar ul { position: absolute; bottom: 0; right: 0; }
/* Style your #nav-bar ul li stuff here */
Semantics lesson edit: try to avoid using inline styles as much as you can :)
语义课程编辑：尽可能避免使用内联样式:)
To Clarify
In IE8 and below, positioning of elements was not on par with the standard of the good browsers, so with your stuff all scoped improperly and the use of absolute positioning, you're bound to get these problems.
在IE8及以下版本中，元素的定位与优秀浏览器的标准不相上下，因此，如果你的东西都是不正确的，并且使用绝对定位，那么你一定会遇到这些问题。