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

Question

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

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

nav根本不会扩展其宽度： auto以适应所有浮动元素。

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

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

Basically setting the width of the nav element to 100% does the trick. Here’s an optimized example:

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;
}

Check it out on Codepen: http://codepen.io/zitrusfrisch/pen/Jcirx