étrange firefox flotteur de positionnement, fonctionne très bien sur chrome/safari (CSS)

J'ai un étrange problème dans Firefox, je n'arrive pas à résoudre. Dans Chrome et Safari mon float: left et float: right colonnes sont travail correctement et dans la bonne position, mais quand je l'ai vue dans Firefox c'est wayyyy foiré. Mon fond d'en-tête est dans la section ci-dessus, et mes colonnes sont superposées! J'ai été la recherche autour, mais ne peut pas vraiment trouver des solutions à des différences dans Firefox -- quelqu'un peut jeter un oeil à mon code et me dire ce qu'il se passe? Ou faut-il que les faits à propos de Firefox chars que je ne suis pas au courant? Merci!!!!

Voici mon JsFiddle avec mon code. Les flotteurs semblent être d'accord dans Firefox pour le JsFiddle.. tout simplement pas sur ma page. Ugh, je vais continuer à chercher, mais je suis sûr que c'est un problème avec la flotte.. Supprimant tout fait aligner parfaitement sur Firefox. Au moins la colonne de gauche.

Voici pertinentes css float:

.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;
}

Merci pour toute aide que vous pouvez fournir!

ஃ Shanling

Si vous ne pouvez pas reproduire le problème dans cet exemple simple, les chances sont qu'il a quelque chose à voir avec le reste de la page.

OriginalL'auteur shan | 2013-06-15

6

Sans que la question ait reproductibles, il est difficile de dire ce qu'il en est. Cependant, il suffit de lire la question et d'expériences personnelles, je dirais, essayez d'ajouter des clear: both de la quatrième classe CSS (en-tête). En outre, il peut ne pas être nécessaire de laisser flotter votre deuxième liste de droite. Au lieu de cela, définir les marges, une fois votre première liste est flottant à gauche.

Encore une fois, il est difficile de dire si le problème ne peut pas être reproduit. Juste faire des suppositions éclairées à ce point. Si vous ne trouver un moyen de le reproduire, certainement porter sur le dos!

Merci pour la réponse! Je vais essayer cela.
claire: droit fonctionne dans mon cas. merci

OriginalL'auteur ThatTechGuy
4

J'ai enfin trouvé le problème et il a une marge négative dans l'une des sections au-dessus de la section de problème. Semble que firefox n'aime pas les marges négatives très bien.. Merci pour l'aide les gars 🙂

OriginalL'auteur shan
2

Sembler comme IE doit avoir eu le problème de ne pas firefox, mais bon si ça marche il fonctionne?

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

OriginalL'auteur GeneralKurt

J'ai eu le même problème avec une mise en page de divs et j'ai résolu mon problème en ajoutant une bordure blanche à la les divisions à l'aide de css, mon exemple de code:

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

J'espère que cela aide!

OriginalL'auteur Alexis Mantecon

0

ajouter clear:both pour les conteneurs et les div, il permettra de résoudre votre problème
```
.fourtextleft, .fourtextright, .floaters {
clear: both;
}
```
OriginalL'auteur Arjun

Vous devez vous connecter pour publier un commentaire.