CSS未在Chrome浏览器中正确应用

时间:2013-03-21 14:49:46

标签: html css css-float

我的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中。请参考屏幕截图以供参考

BUTTON NOT DISPLAYED ORDERLY

以下是来自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(同样的类名)。它在那里完美地工作。不确定这里缺少什么

请帮我解决这个问题

1 个答案:

答案 0 :(得分:3)

尝试设置overflow:hidden for .page_nav:

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