Погрузочные нагрузки Chrome: справа на новую строку

У меня проблема с загрузкой в chrome только там, где в определенные моменты она загружает все сразу, а float отлично выглядит в меню, но в других случаях он загружает его медленнее, чем обычно, и это приводит к тому, что float разбивается на новый линия. Я замечаю, что это обычно происходит только при жестких обновлениях (F5), но иногда это происходит при простое нажатие.

Это не проблема в IE, Firefox или Safari. У меня есть какие-либо изменения в моем коде, чтобы исправить эту проблему?

Вот мой код:

HTML:

$text .=    '<div class="block-menu ">';
$text .=        '<a class="block-menu-item logo gray" href="/"></a>';
$text .=        '<a class="block-menu-item">Button 1</a>';
$text .=        '<a class="block-menu-item">Button 2</a>';
$text .=        '<a class="block-menu-item">Button 3</a>';

//Floats right
$text .=        '<div id="block-menu-bar-button">';
$text .=            '<a class="block-menu-item">Button 4</a>';
$text .=            '<a class="block-menu-item">Button 5</a>';
$text .=            '<div style="clear:both;"></div>';
$text .=        '</div>';
$text .=    '</div>';

CSS

#block-menu-bar-button{
     float:right; 
     display:inline-block; 
     overflow:hidden;
}
.block-menu{
     position:relative; 
     width:70%; 
     text-align:left; 
     margin:auto; 
     padding:15px 0;
}
a.block-menu-item, div.block-menu-item{
     display:inline-block; 
     margin:0 20px; 
     padding:2px 0;
     border-bottom: 2px solid transparent;
     cursor:pointer;
}

Меня интересуют альтернативы float: правильно (не поклонник поплавков). Я играл с идеей использования table-cell, но я понял, что это плохая практика. Также я играл с идеей flex-box, но они не поддерживаются в ie8 или 9, и мой сайт поддерживает эти браузеры.

Ответ 1