css - Wordpress 页脚跨浏览器浮动错误行为

Question

我的 wordpress 的页脚在 chrome 和 Firefox 中的行为不同。在 chrome 中，我的页脚的右侧部分会移动，即使它应该与左侧部分对齐。在Firefox中它工作正常。

可以在此处找到该页面的骨架：http: //sometestdomain.comeze.com/3-2/ 任何想法如何解决这个问题？

这是我的 CSS 的相关部分

div.front-widgets * h3 {
    color: #ffffff;
}

.template-front-page.two-sidebars .widget-area .front-widgets {
    background: #2c2c2c;
    float: left;
    width: 60.9375%;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    height: 17.857142rem;
    color: #ffffff !important;
}
.template-front-page .widget-area .widget {
    padding: 20px 20px 0 20px;
}
.template-front-page .widget-area .widget:nth-child(odd) {
    clear: right;
}
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
    float: right;
    width: 39.0625%;
}

Answer 1

在 Chrome 中，.front-widgets 的父 div 混淆了第二个 .front-widgets 元素的正确呈现。如果您只是为 #secondary 对象分配一些高度，它将解决问题。

就像是：

#secondary {
    min-height: 200px;
}

应该为 chrome 解决问题 =)