Question

我有以下代码看起来很好，但在IE10及更早版本中，ul仍然会出现大约10px的底部填充。如何删除IE中的底部填充？我看到的所有答案似乎都有“margin：0; padding：0;”但我已经做到了。

<div id="activitiesmenu">
<div>
    <ul>
    <li><a href="playgroups.html">Playgroups</a></li>
    <li><a href="outings.html">Outings</a></li>
    <li><a href="parks.html">Parks</a></li>
    <li><a href="publicareas.html">Public areas</a></li>
    <li><a href="activities.html">Activities</a></li>
    </ul>
</div>
</div>

#activitiesmenu {
clear: both;
border: 1px solid #cccccc;
margin: 0;
padding: 0;
margin-bottom: 10px;
overflow: auto;
}

#activitiesmenu div {
float: left;
width: 110px;
border: 1px solid #cccccc;
list-style-type: none;
margin: 0;
padding: 0;
}

#activitiesmenu ul {
margin: 0;
padding: 0;
}

#activitiesmenu a, #activitiesmenu li {
color: #aa4499;
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
}

添加，“activitiesmenu”已经设计好了。我已经添加了上面的CSS。所以“activitiesmenu div”实际上是为了设计ul的风格，因为它是自己的div。另外，我是一个完整的新手，只有几个星期从头开始，所以原谅任何看似简单的错误（比如我现在纠正的ul开场div）

Answer 1

首先，你的开场ul标签是关闭标签。

</ul> change to <ul>

其次#activitiesmenu div {}的css属性是设置父div的子div的css属性，id = activitiesmenu意思是：

#activitiesmenu div {
float: left;
width: 110px;
border: 1px solid #cccccc;
list-style-type: none;
margin: 0;
padding: 0;
}

<div id="activitiesmenu">
<div> <-- Style applies to this div and not the top one
    <ul> <-- change
    <li><a href="mtotoplaygroups.html">Playgroups</a></li>
    <li><a href="mtotooutings.html">Outings</a></li>
    <li><a href="mtotoparks.html">Parks</a></li>
    <li><a href="mtotopublicareas.html">Public areas</a></li>
    <li><a href="mtotoactivities.html">Activities</a></li>
    </ul>
</div>
</div>

也试试;

body {
margin: 0;
padding: 0;
}

Answer 2

在你的Css文件中尝试这个：

*{
margin:0;
padding:0;
}

如何删除IE中的默认底部填充

2 个答案: