我正在使用 Zurb Foundation 的顶部栏组件,并在导航标签中添加了 1px 和 3px(顶部、底部)边框。我遇到了高度问题,因为里面的 ul 菜单设置为 100% 高度。
减去 4px 高度的最有效方法是什么?
出于兼容性原因,我想避免使用 CSS calc(),但我只是在寻找 IE8+ 兼容性。我在这个问题中看到了一条评论,引用display: table
了我尝试申请但没有成功的使用。
CSS 添加到默认导航:
nav {
border-top: 1px solid #fff;
border-bottom: 3px solid #fff;
@include box-shadow(0 0 5px 0 hsla(0, 0%, 0%, 0.2));
}
UL 高度 CSS 摘录:
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline;
}
导航标签内的部分 HTML 摘录:
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CASE STUDIES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</section>