странное позиционирование поплавка Firefox, отлично работает в chrome/safari (CSS)

У меня странная проблема в Firefox, которую я не могу исправить. Как в Chrome, так и в Safari мои столбцы float: left и float: right работают правильно и в правильном положении, но когда я просматриваю их в Firefox, они сильно испортились. Мой нижний заголовок находится в разделе над ним, и мои столбцы перекрываются! Я искал вокруг, но не могу найти никаких конкретных решений для плавающих различий в Firefox - может кто-нибудь взглянуть на мой код и сказать мне, что происходит? Или у кого-то есть какие-то факты о поплавках Firefox, о которых я не знаю? Спасибо!

Вот мой JsFiddle с моим кодом. Поплавки, кажется, в порядке в Firefox для 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;
}

Спасибо за любую помощь, которую вы можете предоставить!

ஃ Шаньлин


css firefox css-float
person shan    schedule 15.06.2013    source источник
comment
Если вы не можете воспроизвести проблему в этом простом примере, скорее всего, она связана с остальной частью страницы.   -  person Fabian Tamp    schedule 15.06.2013

Ответы (5)


arrow_upward
6
arrow_downward

Без воспроизводимости проблемы трудно сказать, что это такое. Однако, просто прочитав вопрос и исходя из личного опыта, я бы сказал, попробуйте добавить clear: both в четвертый класс CSS (ваш заголовок). Кроме того, возможно, нет необходимости перемещать второй список вправо. Вместо этого установите поля, когда ваш первый список плавает влево.

Опять же, трудно сказать наверняка, если проблема не может быть воспроизведена. Просто делаю обоснованные предположения на данный момент. Если вы найдете способ воспроизвести его, обязательно верните его!

person ThatTechGuy    schedule 15.06.2013
comment
Спасибо за ответ! Я попробую это. - person shan; 15.06.2013

arrow_upward
4
arrow_downward

Наконец-то я нашел проблему, и это был отрицательный запас в одном из разделов над проблемным разделом. Кажется, Firefox не очень любит отрицательные поля. Спасибо за помощь, ребята :-)

person shan    schedule 15.06.2013

arrow_upward
2
arrow_downward

Похоже, что у IE должна была быть проблема, а не у firefox, но эй, если он работает, он работает правильно?

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

person GeneralKurt    schedule 17.06.2013

arrow_upward
0
arrow_downward

У меня была такая же проблема с макетом div, и я решил свою проблему, добавив белую рамку к 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>

Я надеюсь, что это помощь!

person Alexis Mantecon    schedule 03.02.2015

arrow_upward
0
arrow_downward

добавьте clear:both для контейнера и div, это решит вашу проблему

.fourtextleft, .fourtextright, .floaters {
clear: both;
}
person Arjun    schedule 16.06.2015