Safari 10.1 non visualizza correttamente la pagina:

1

Safari 10.1 non mostra correttamente la pagina in parte in cui l'immagine e il titolo che si suppone siano nel mezzo e vengano visualizzati correttamente su Fair Fox e Chrome visualizzati sul lato dello schermo.

Trovo una domanda simile su Apple Community:

link

La soluzione suggerita è di ripristinare i font standard:

Try Applications > Font Book > File > Restore Standard Fonts

Ma non sono riuscito a trovare dove in Applications > il Font Book File individuato.

Come trovarlo o usarlo in un'altra soluzione per risolvere i problemi di formattazione in Safari 10.1?

//ACURA

<styletype="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;
 }
   }
    
posta User 31.08.2017 - 18:52
fonte

1 risposta

1

Sembra che tu abbia incontrato un bug con il renderer di Safari. Ridimensiona la finestra verticalmente e la pagina si riflette correttamente. Ridimensiona orizzontalmente e la pagina si estende orizzontalmente in modo errato. Eviterei di usare le tabelle per il layout e di usare Flex.

Estrai l'immagine dal layout della tabella. Sostituisci quanto segue dal tuo codice:

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

con il seguente:

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

Quindi aggiungi il seguente CSS a .pics-wrapper : width: 851px; .

La soluzione indicata nel tuo link (non che risolverebbe il problema qui ma è qualcosa che hai chiesto) è la seguente:

  1. Apri l'app Libro Font dalla cartella Applicazioni.

  2. Scegli il menu File seguito da Ripristina font standard.

risposta data 31.08.2017 - 18:56
fonte

Leggi altre domande sui tag