Safari 10.1 zeigt die Seite nicht richtig an:

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?

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

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.