Question

这是我的菜单的代码。问题是在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;
}

Answer 1

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

这种情况的原因是所有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中，无效。

OR

在你的newdiv中放一个div，宽度为：auto;和margin-left：15px;

从newdiv中删除填充。

The W3 Box model page has good info.

IE8为什么会出现问题？

1 个答案: