0

我的问题：我刚刚编写了一个在 chrome 和 firefox 中样式很好的网站。但是在 internet explorer(9) 中它会中断。灰色标题背景应该被推到徽标块的右侧，按钮应该位于深灰色区域。我发布了我的代码。我不是css专家，任何提示将不胜感激。（第二张图片显示了想要的结果） 在此处输入图像描述

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>

的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);
}
4

1 回答 1

1

你的问题是定位和范围。您的 nav_main 内容应在其容器的范围内。目前您正试图独立定位许多不同的元素，但让它们看起来“附加”，这基本上是不可能的。

我给你举个例子：

<div id="header">
<div id="nav-bar">
    <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
    </ul>
</div>
</div>

这是更适合您的标题区域的布局。示例 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 */

语义课程编辑：尽量避免使用内联样式:)

澄清

在 IE8 及以下版本中，元素的定位与优秀浏览器的标准是不相上下的，所以你的东西都没有正确的范围和使用绝对定位，你一定会遇到这些问题。

于 2012-10-29T23:07:28.293 回答