html - CSS 未在 chrome 浏览器中正确应用

Question

我的 JSPX 中有以下几行

<div class="page_nav">
   <a id="saveButton" class="button"><span>${save}</span></a>           
   <a id="cancelButton" class="button"><span>${cancel}</span></a>
</div>

用于加载“保存”和“取消”按钮。当我加载页面时，按钮的顺序是没有顺序的，只有在 chrome 中。请参阅屏幕截图以供参考

下面是css的复制粘贴

a.button {
    background: transparent
        url('../../images/admin/bg_button_span.png') repeat
        scroll top right;
    color: #fff;
    display: block;
    float: left;
    font: normal 1.1em Tahoma, Arial;
    height: 24px;
    margin-right: 6px;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.page_nav {
   float: left;
   margin: 1em 0;
   width: 100%;
   clear: both;
}

这仅在 chrome 中发生

我在另一个页面中使用相同的 div（同样的类名）。它在那里完美地工作。不知道这里缺少什么

请帮助我

Answer 1

尝试为 .page_nav 设置溢出：隐藏：

.page_nav {
   float: left;
   display:block;
   margin: 1em 0;
   width: 100%;
   overflow: hidden;
}