-3

这是我的菜单的代码。问题在于 Mozilla 和 Chrome .. 一切都很完美。但是 IE8 并没有按照我的意愿查看我的菜单。我设置了填充，但它就像我没有填充一样。那就是当鼠标悬停在红色背景上时，实际上只是让我们说线..它应该像一个盒子！

<div class="section" id="navbar">
                        <div class="nav">
                            <ul>
                                <li><a href="">Home</a></li>
                                <li><a href="">About</a></li>
                                <li><a href="">Ressources</a></li>
                                <li><a href="">Gallery</a></li>
                                <li><a href="">Contact</a></li>
                            </ul>
                        </div>
//some other code
</div>

这是CSS：

.nav{margin:25px 0 0 180px;}
.nav li{
list-style-type:none;
display:inline-block;
float:left;
color:#910808;

}
.nav li:hover{
background-color:#910808;
color:#ffffff;
}
.nav li a{
text-decoration:none;
border-top:2px solid #910808;
color:#910808;
background-color:none;
padding:15px;
}

.nav li a:hover{
text-decoration:none;
color:#ffffff;
background-color:#910808;
}

#navbar{
width:980px;
height:58px;
}
4

1 回答 1

0

问题是您在主 div 上有一个内联样式，其中包含所有显示其为 1000 像素的内容。其中的每个元素都具有相同的宽度。正如您所遇到的，这不适用于所有浏览器。尝试在内部 div上使用宽度百分比，例如 50%（这个数字只是一个猜测......这将取决于您的边距/填充有多大）。

出现这种情况的原因是边距和填充被考虑到所有您divs以及主 div 中。您正在尝试将 div 放入具有相同宽度的 div 中。两者divs都有默认边距/填充。此外，您已经明确声明了一些具有意外应用行为的填充。

更新

添加属性：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */

但请注意，这在低于版本 8 的 Internet Explorer 中不起作用。

或者

在你的newdiv中放一个div，宽度为：auto; 和左边距：15px；

从 newdiv 中删除填充。

W3 Box 模型页面有很好的信息。

于 2013-07-06T13:21:06.610 回答