奇怪的firefox浮动定位,在chrome/safari(CSS)中工作正常

Question

我在Firefox中有一个奇怪的问题,我似乎无法修复.在Chrome和Safari中我的浮动:左侧和浮动:右侧列正常工作并处于正确的位置,但是当我在Firefox中查看它时,它很混乱.我的底部标题位于其上方,我的列重叠!我一直在寻找,但无法找到任何具体的解决方案来浮动Firefox的差异 - 有人可以看看我的代码并告诉我发生了什么？或者有人有任何关于我不知道的Firefox浮动的事实吗？谢谢!

这是我的JsFiddle和我的代码.对于JsFiddle,Firefox中的浮动似乎没问题..只是不在我的页面上.呃,我会继续寻找,但我很确定它是漂浮物的一个问题.删除它们使得一切都很好地融合在Firefox上.至少左栏.

这是相关的浮点数css:

.fourtextleft {
    font-family: Roboto;
    text-decoration: none;
    text-transform: none;
    font-weight: 300;
    font-size: .5em;
    color: #666;
    float: left;
    width: 38%;
    height: auto;
    text-align: justify;
    margin: 0% 5% 2% 0%;
    padding: 4% 2% 3.5% 0%;
    vertical-align: middle;
}

.fourtextright {
    font-family: Roboto;
    text-decoration: none;
    text-transform: none;
    font-weight: 300;
    font-size: 1em;
    color: #666;
    float: right;
    width: 30%;
    height: auto;
    text-align: justify;
    margin: 3% 15% 2% 0%;
    padding: 4% 0% 3.5% 2%;
    vertical-align: middle;
}

.floaters {
    clear: both;
}

感谢您提供的任何帮助!

ஃ善陵

Answer 1

如果没有可复制的问题,很难说它是什么.但是,仅仅通过阅读问题和个人经验,我会说尝试添加clear: both到第四个CSS类(您的标题).此外,可能没有必要将您的第二个列表浮动到右侧.而是在第一个列表向左浮动时设置边距.

同样,很难确定该问题是否无法复制.在这一点上做出有根据的猜测.如果你确实找到了复制它的方法,一定要把它带回来!