html - 包含 float 子项的元素的宽度自动问题

Question

这种奇怪的行为快把我逼疯了。如果我在服务器上上传页面，第一次在 chrome/safari 打开它时，我遇到了这个问题:

如果我刷新它，或者当我在本地处理页面时，完全没有问题。

nav 根本不会扩展其 width: auto 以适应所有 a float 元素。

这是非常简单的代码(我删除了不相关的规则，但知道我使用的是网络字体是否有用):

html:

<nav>
  <a href="#">button</a>
  <a href="#">button</a>
  <a href="#">button</a>
  <div class="clear"></div>
</nav>

CSS:

nav {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  width: auto;
  height: 33px;
}

nav > a {
  box-sizing: border-box;
  display: block;
  float: left;
  padding: 11px 13px;
  height: 100%;
  border: 1px solid #7a7e7f;
}

div.clear {
  clear: both;
}

Answer 1

基本上将导航元素的宽度设置为 100% 就可以了。这是一个优化的例子:

HTML

<nav>
  <a href="#">button</a>
  <a href="#">button</a>
  <a href="#">button</a>
</nav>

CSS

nav {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  width: 100%;
  overflow: hidden; /* Makes the clearing div obsolete */
}

nav > a {
  box-sizing: border-box;
  float: left;
  padding: 11px 13px;
  border: 1px solid #7a7e7f;
}

在 Codepen 上查看:http://codepen.io/zitrusfrisch/pen/Jcirx