Safari 10.1 zeigt die Seite nicht richtig an:


0

Safari 10.1 zeigt die Seite teilweise nicht richtig an, wenn das Bild und der Titel, die in der Mitte angezeigt werden sollen, auf Fair Fox und Chrome richtig auf der Seite des Bildschirms angezeigt werden.

Ich finde eine ähnliche Frage zu Apple Communities:

https://discussions.apple.com/message/31621999#31621999

Die vorgeschlagene Lösung besteht darin, Standardschriftarten wiederherzustellen:

Try Applications> Font Book> File>Restore Standard Fonts

Aber ich konnte nicht finden, wo in Applicationsder Font Book Filebefindet.

Wie finde ich es oder verwende es in einer anderen Lösung, um Formatierungsprobleme in Safari 10.1 zu beheben?

Beispiel

// BEARBEITET

<style type="text/css">
    .pics-wrapper {           
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex; 
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.pics-wrapper: width: 851px;

table {             
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.left-pics p,
.right-pics p 
.bottom-pic p
{            
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

}

.left-pics img,
.right-pics img 
.bottom-pic img
{
  padding:2px;
}



@media (max-width:960px) {
 .left-pics p,
 .right-pics p 
 .bottom-pic p
 {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
 }
   }

Können Sie einen Link zu der Seite teilen, mit der Sie das Problem haben?
grg

Das untere kleine Bild ist nicht in der Mitte und die linken Bilder sind nicht sichtbar. In anderen Browsern gibt es kein solches Problem: sfreorealty.com/home/studentt.html
Benutzer

Antworten:


1

Anscheinend ist Ihnen ein Fehler mit dem Safari-Renderer begegnet. Ändern Sie die Größe des Fensters vertikal und die Seite fliesst korrekt. Ändern Sie die Größe horizontal und die Seite wird horizontal falsch erweitert. Ich würde es vermeiden, Tabellen für das Layout zu verwenden, und mich an flex halten.

Extrahieren Sie das Bild aus dem Tabellenlayout. Ersetzen Sie das Folgende aus Ihrem Code:

<table id="Table_01" border="0" width="851" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="7" rowspan="9"><img id="biggest_one" style="display: block; margin-left: auto; margin-right: auto;" src="https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg" alt="" width="480" height="640" name="biggest_one"
      /></td>
    <td colspan="2" rowspan="10">&nbsp;</td>
    <td><img src="photo_over/spacer.gif" alt="" width="1" height="3" /></td>
  </tr>
</table>

mit den folgenden:

<img id="biggest_one" style="display: block; margin-left: auto; margin-right: auto;" src="https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg" alt="" width="480" height="640" name="biggest_one">

Dann fügen Sie die folgenden CSS .pics-wrapper: width: 851px;.


Die Lösung, auf die in Ihrem Link verwiesen wird (nicht, dass dies das Problem hier lösen würde, aber Sie haben danach gefragt), lautet wie folgt:

  1. Öffnen Sie die Schriftenbuch-App aus dem Anwendungsordner.

  2. Wählen Sie das Menü Datei und anschließend Standardschriftarten wiederherstellen.


Diese Lösung funktioniert nicht: Die gleiche falsche Formatierung wie zuvor.
User

@User Ja, das Wiederherstellen von Schriftarten ist hilfreich, wenn Sie Probleme mit der Anzeige von Textinhalten haben. Sie spielen in den von Ihnen angesprochenen Standortproblemen keine Rolle.
Tom Gewecke

Irgendeine Idee, wie man diese Formatierung repariert?
User
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.