Это странное поведение сводит меня с ума. Если я загружу страницу на сервере, первый раз, когда я ее открываю на chrome/safari, я получаю эту проблему:
Если я обновляю его или когда я работаю на странице локально, проблем не возникает вообще.
Навигатор просто не расширяет свою ширину: auto, чтобы соответствовать всем плавающим элементам.
Это действительно простой код (я удалил несвязанные правила, но если было бы полезно узнать, что я использую 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;
}
В основном настройка ширины элемента nav на 100% делает трюк. Heres оптимизированный пример:
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