Question

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

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

这是相关的float 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;
}

感谢您提供的任何帮助！

ஃShanling

Answer 1

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

同样，很难确定问题是否无法复制。在这一点上做出有根据的猜测。如果你确实找到了复制它的方法，那么一定要把它带回去！

Answer 2

我终于找到了问题，在问题部分上面的一个部分中它是一个负边距。似乎firefox不喜欢负边距..感谢帮助人： - ）

Answer 3

似乎IE应该有问题而不是firefox，但嘿，如果它工作正常吗？

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 4

我对div的布局有同样的问题，我解决了我的问题，使用css为我的示例代码添加白色边框：

<head>
    <title>Sample Layout</title>
    <style type="text/css">
        .divToLeft
        {
            width: 49.5%;
            float: left;
        }

        .divToRight
        {
            width: 49.5%;
            float: right;
        }
        .divToCenter
        {
            width: auto;
            float: none;
            **border-color: #FFF;
            border-width: 1px;
            border-style: solid;**
        }
    </style>
</head>
<body>

<div id="pnlMainHolder" style="width: 100%">

    <div id="Rep0" class="divToCenter">
    Rep0
    </div>
    <div id="pnlLeft" class="divToLeft">
        <div id="Rep1" class="divToCenter">
        rep1
        </div>
        <br />
        <div id="Rep3" class="divToCenter">
        rep3
        </div>
        <br />
        <div id="Rep5" class="divToCenter">
        rep5
        </div>
        <br />
        <div id="Rep7" class="divToCenter">
        rep7
        </div>
    </div>
    <div id="pnlRight" class="divToRight">
        <div id="Rep2" class="divToCenter">
        rep2
        </div>
        <br />
        <div id="Rep4" class="divToCenter">
        rep4
        </div>
        <br />
        <div id="Rep6" class="divToCenter">
        rep6
        </div>
        <br />
        <div id="Rep8" class="divToCenter">
        rep8
        </div>
    </div>
    <div id="Rep9" class="divToCenter">
    rep9
    </div>
</div>

</body>

我希望这有帮助！

Answer 5

为容器和div添加clear:both，它将解决您的问题

.fourtextleft, .fourtextright, .floaters {
clear: both;
}

奇怪的firefox浮动定位，在chrome / safari（CSS）中工作正常

5 个答案: