Chrome加载强制浮动:右转到新行

Question

我在chrome中遇到加载问题,只有在某些时候它一次加载它并且浮动在菜单中看起来很好,但有时它加载它比平常慢,它会导致浮动突破到一个新行.我注意到它通常只发生在硬刷新(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;
}

我对浮动的替代品感兴趣:正确(不是花车的粉丝).我已经玩弄了使用表格单元格的想法,但我已经假设这是不好的做法.此外,我已经玩弄了弹性盒的想法,但ie8或9不支持它们,我的网站适应那些浏览器.

Answer 1

在您的HTML中,浮动项应该是第一个而不是第二个.我没有一个很好的解释为什么...我刚刚在Chrome中注意到,有时页面在浮点数应用之前呈现,如果元素在其余内容之后,则浮点数永远不会正确应用.