1

我正在使用 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>
4

1 回答 1

2

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

box-sizing默认值为content-box。在这种情况下，元素的实际渲染height是给定的高度 + 填充 + 边框。

box-sizing您可以在此MDN 链接中找到更多详细信息。

编辑：修改width为height问题是关于height.

于 2013-09-22T11:16:44.497 回答