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中注意到，有时页面会在浮点数应用之前呈现，如果元素位于其余内容之后，则浮点数永远不会正确应用

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

1 个答案: