Les flotteurs gâchent dans les navigateurs Safari

StackOverflow https://stackoverflow.com/questions/50280

  •  09-06-2019
  •  | 
  •  

Question

J'ai un site que j'ai créé très rapidement et qui utilise des flotteurs pour afficher différentes sections de contenu.Le contenu flottant et le contenu qui a une marge supplémentaire apparaissent tous deux bien dans FF/IE, mais sur Safari, l'un des divs est complètement masqué.J'ai essayé de passer à padding et position:relative, mais rien n'a fonctionné pour moi.Si je retire le code pour l'afficher à droite, il réapparaît mais sous le contenu flottant.

La section principale du CSS qui semble être à l'origine du problème est la suivante :

#settings{
    float:left;
}

#right_content{
    margin-top:20px;
    margin-left:440px;
    width:400px;
}

Cela me donne le même résultat, que je spécifie ou non une taille au div #settings.Toute idée serait appréciée.

Le site est disponible à l'adresse suivante : http://frickinsweet.com/tools/Theme.mvc.aspx pour voir le code source.

Était-ce utile?

La solution

Je pense que l'erreur réside dans le balisage généré par le sélecteur de couleurs.J'ai enregistré la page et supprimé ce code pour le sélecteur de couleurs et le rendu est correct dans IE/FF/SF.

Autres conseils

Avez-vous essayé de faire flotter le div #right_content vers la droite ?

#right_content{
  float: right;
  margin-top: 20px;
  width: 400px;
}

Désolé, j'aurais dû le mentionner également.J'ai essayé de faire flotter ce contenu vers la droite et j'ai également essayé de le faire flotter vers la gauche et de définir la position en pensant que les deux divs commenceraient à gauche:0 où définir la marge de droite le déplacerait.

Merci

Quelques points que vous devez corriger au préalable :

  1. Ton <style> le tag est dans <body>, quand il appartient à <head>

  2. Vous avez une faute de frappe "réelle" dans l'un de vos styles en ligne :

    <a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">

Essayez d'amener votre page à valider;cela devrait rendre le débogage des problèmes réels beaucoup plus facile.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top