html - 不使用 calculator() 从 ul 高度移除边框的 CSS 解决方案

Question

我使用的是 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>

Answer 1

在有边框的元素上使用 box-sizing: border-box;。这使得 border 和 padding 成为给定 height 和 width 的一部分。

box-sizing 的默认值为 content-box。在那种情况下，元素的实际呈现的 height 是给定的高度 + padding + border。

您可以在 MDN Link 中找到有关 box-sizing 的更多详细信息.

编辑:将 width 修改为 height，因为问题是关于 height 的。