我使用的是 Zurb Foundation 的顶部栏组件,并且我在 nav 标签中添加了 1px 和 3px(顶部,底部)边框。我遇到了高度问题,因为里面的 ul 菜单设置为 100% 高度。
减去 4px 高度的最有效方法是什么?
出于兼容性原因,我想避免使用 CSS calc(),但我只是在寻找 IE8+ 兼容性。我在这个 question 看到了评论使用 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>
最佳答案
在有边框的元素上使用 box-sizing: border-box;
。这使得 border
和 padding
成为给定 height
和 width
的一部分。
box-sizing
的默认值为 content-box
。在那种情况下,元素的实际呈现的 height
是给定的高度 + padding + border。
您可以在 MDN Link 中找到有关 box-sizing
的更多详细信息.
编辑:将 width
修改为 height
,因为问题是关于 height
的。
关于html - 不使用 calculator() 从 ul 高度移除边框的 CSS 解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18943240/