包含浮动子元素的元素的宽度自动问题

Question

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

如果我刷新它，或者当我在本地工作时，没有任何问题。

nav 根本不会扩展其 width：auto 以适合所有 a 浮动元素。

这是非常简单的代码（我删除了不相关的规则，但如果知道我使用的是webfont可能有用）：

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

基本上将nav元素的宽度设置为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