3

我在 Firefox 中遇到了一个我似乎无法解决的奇怪问题。在 Chrome 和 Safari 中，我的 float: left 和 float: right 列都可以正常工作并且处于正确的位置，但是当我在 Firefox 中查看它时，它就搞砸了。我的底部标题在它上面的部分，我的列是重叠的！我一直在寻找，但真的找不到任何具体的解决方案来解决 Firefox 中的浮动差异——有人可以看看我的代码并告诉我发生了什么吗？或者有人有我不知道的关于 Firefox 浮动的任何事实吗？谢谢！

这是我的JsFiddle ，里面有我的代码。在 Firefox for the JsFiddle 中，漂浮物似乎没问题。只是不在我的页面上。呃，我会继续寻找，但我很确定这是浮动的问题.. 删除它们使 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;
}

感谢您提供的任何帮助！

ஃ 山岭

4

5 回答 5

6

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

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

于 2013-06-15T04:26:25.580 回答
4

我终于找到了这个问题，它是问题部分上方的一个部分的负边距。似乎firefox不太喜欢负边距..感谢您的帮助:-)

于 2013-06-15T04:43:27.090 回答
2

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

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

于 2013-06-17T22:04:00.647 回答
0

我在 div 的布局上遇到了同样的问题，我解决了使用 css 向 div 添加白色边框的问题，我的示例代码：

<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>

我希望这有帮助！

于 2015-02-03T17:58:54.050 回答
0

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

.fourtextleft, .fourtextright, .floaters {
clear: both;
}
于 2015-06-16T11:35:45.737 回答