Floats stören in Safari-Browsern

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

  •  09-06-2019
  •  | 
  •  

Frage

Ich habe eine Website, die ich sehr schnell erstellt habe und die Floats verwendet, um verschiedene Inhaltsabschnitte anzuzeigen.Der schwebende Inhalt und der Inhalt mit einem zusätzlichen Rand werden in FF/IE beide gut angezeigt, aber auf Safari ist eines der Divs vollständig ausgeblendet.Ich habe versucht, zu zu wechseln padding Und position:relative, aber bei mir hat nichts funktioniert.Wenn ich den Code herausnehme, um ihn rechts anzuzeigen, wird er wieder angezeigt, jedoch unter dem schwebenden Inhalt.

Der Hauptabschnitt von CSS, der das Problem zu verursachen scheint, ist:

#settings{
    float:left;
}

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

Dies führt zu demselben Ergebnis, unabhängig davon, ob ich dem #settings-Div eine Größe spezifiziere oder nicht.Alle Ideen wären willkommen.

Die Website ist verfügbar unter: http://frickinsweet.com/tools/Theme.mvc.aspx um den Quellcode zu sehen.

War es hilfreich?

Lösung

Ich glaube, der Fehler liegt in der Markierung, die der Farbwähler generiert.Ich habe die Seite gespeichert und den Code für den Farbwähler entfernt und sie wird in IE/FF/SF einwandfrei gerendert.

Andere Tipps

Haben Sie versucht, das Div #right_content nach rechts zu verschieben?

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

Tut mir leid, das hätte ich auch erwähnen sollen.Ich habe versucht, den Inhalt nach rechts zu verschieben, und zusätzlich habe ich versucht, ihn nach links zu verschieben und die Position festzulegen, wobei ich dachte, dass beide Divs bei links beginnen würden: 0, wohingegen das Festlegen des rechten Rands ihn verschieben würde.

Danke

Ein paar Dinge sollten Sie vorher klären:

  1. Dein <style> Tag ist drin <body>, wenn es reingehört <head>

  2. Sie haben einen Tippfehler „realtive“ in einem Ihrer Inline-Stile:

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

Versuchen Sie, Ihre Seite zu erreichen bestätigen;Dies sollte das Debuggen der tatsächlichen Probleme erheblich erleichtern.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top