Wordpress 页脚跨浏览器浮动错误行为答案

【问题标题】：Wordpress footer cross-browser floating misbehaviourWordpress 页脚跨浏览器浮动错误行为
【发布时间】：2013-02-12 10:31:20
【问题描述】：

我的 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%;
}

【问题讨论】：

该网站在 Firefox 和 Chrome 中看起来一模一样 -- 您确定您正在查看最新版本吗？
请发布问题 HTML 以及您的 CSS。或者更好的是制作一个 jsfiddle 来解决问题。
在第一页没有问题，但是当我遍历菜单时，例如在此页面上sometestdomain.comeze.com/3-2 页脚的右侧部分在我的 chrome 中移动

标签： css html wordpress footer

【解决方案1】：

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

类似：

#secondary {
    min-height: 200px;
}

应该为 chrome 解决问题 =)

【讨论】：