Cosa potrebbe causare lo stesso browser su PC diversi per il rendering dello stesso codice HTML in modo diverso?

Question

Sono perplesso. Un client e io stiamo entrambi utilizzando Firefox 3.0.12 su macchine XP. Visualizziamo la stessa pagina nello stesso browser su macchine diverse e abbiamo risultati diversi. Nota: tutti i browser IE sono coerenti su entrambe le macchine e il mio FF 3.5.1 è coerente con il mio FF 3.0.12. (Non ha FF 3.5.x installato per il confronto).

C'è una differenza di 1 pixel che causa il suo header div (tutte le immagini, senza testo) da avvolgere. Il mio va bene. Se espongo la sua intestazione di 1 px (tramite la modifica di Firebug css), funziona.

Quindi la mia domanda è quali altre variabili ci sono che influenzano il rendering ??

Sto cercando di pensare "fuori dagli schemi" perché sembra che dovrebbe funzionare esattamente allo stesso modo.

Abbiamo svuotato la cache del browser. Ho fatto un diff sul sorgente HTML, e oltre a un timbro datetime javascript e un codice di monitoraggio javascript var, i sorgenti sono identici.

So che questa domanda sarebbe utile con l'origine, ma il mio cliente non vuole che questa pagina sia ancora in diretta su Internet. Inoltre ho verificato il problema tramite una sessione webex. All'inizio, non potevo credere che avremmo avuto risultati diversi.

Qualcun altro ha incontrato qualcosa di simile prima? Cosa devo controllare/eseguire il debug in seguito?

Edit: Ci sono un sacco di suggerimenti che puntano ai font, ma l'intestazione utilizza solo immagini. Beh, non è completamente vero, ci sono div che fanno parte di un menu comprimibile, ma tutto questo è impostato su display:none per il rendering iniziale, quindi penso che sia qualcos'altro.

Modifica 2: Ho modificato tutti i tipi di caratteri e dimensioni (sia le impostazioni dei font predefiniti del sistema che in Firefox) sul mio computer per provare a replicare il problema. Ho cambiato lo stile di rendering (tipo standard vs clear). Nada. Il problema è quasi sicuramente non relativo ai font. Dovrò vedere se riesco a ottenere un altro accesso al computer del cliente per replicare il problema.

Answer 1

Dal momento che non siamo in grado di dare uno sguardo al sito nelle nostre browser, qui è il processo che vorrei utilizzare per tentare di inchiodare il problema:

• iniziare a rimuovere i blocchi di codice pezzo per pezzo finché i due browser non sembrano uguali.

• Qualsiasi blocco di codice che hai rimosso per ultimo ha reso tutto perfettamente allineato (anche se ti manca un pezzo dal corpo), che è vicino a dove è il colpevole.

• Dato che hai trovato il colpevole, rimetti tutto il codice. Inizia a scherzare con i caratteri prima di tutto. Cambia font, dimensioni, rimuovi testo, ecc. finché non trovi una condizione in base alla quale i browser sono uguali. Se non si tratta di un problema di carattere, inizia a fare scherzi con altre parti finché non trovi la condizione corrispondente.

• Una volta fatto, conoscerete il problema e potrete aggirare il problema.

Answer 2

I sistemi operativi diversi hanno diversi motori di rendering dei font. Molto diverso. Più che sufficiente per causare almeno 1 pixel di differenza, a seconda di come si imposta il CSS.

Answer 3

So che il mio FF3.0 rende tutto diverso da quello degli altri perché l'ho impostato in Preferenze per usare una dimensione minima di 16 caratteri. Non riesco a stampare bene, ottengo un mucchio di scritte leggibili.

Inoltre, essendo su un Mac, i caratteri predefiniti sono sans serif, mentre su Windows tutto è serif, che può anche modificare ulteriormente le larghezze e le altezze dei font.

Se qualcosa sulla pagina è specificato con unità "em" o "ex", dipendono dalla dimensione del carattere.

Answer 4

Una cosa che viene in mente sono i caratteri installati. Se hai un font che il client non ha, potrebbe esserci una differenza di 1 pixel in una dimensione calcolata. FF e IE potrebbero arrotondare in modo diverso, il che spiegherebbe perché si comportano diversamente.

Answer 5

Confronto i plug-in/addon.

Answer 6

E le impostazioni di smussamento dei caratteri sono uguali (nessuna/antialias/ClearType)? Questo può cambiare la larghezza di un dato testo e potrebbe essere proprio quello che stai cercando.

Answer 7

State utilizzando entrambi le stesse dimensioni dello schermo? Firefox tenta di ridimensionare i caratteri alle dimensioni apparenti della persona che visualizza la pagina o a un numero specifico di pixel?

Answer 8

SE stai utilizzando Firefox, assicurati di premere Ctrl-0 per impostare il livello di zoom predefinito.

Answer 9

Sono per lo più d'accordo con tutti i "tipi di carattere" più avanti, ma se questo non aiuta provare a controllare le intestazioni HTTP dal momento che alcune intestazioni potrebbero essere aggiunte dai proxy e tali tra il server e il client. Ma provate i suggerimenti di carattere prima ...

Buona fortuna;)

Answer 10

La mia prima risposta è qualcosa a che fare con la finestra, non ricordo questo accada mai in Firefox, ma provare a ridimensionare la finestra in ogni caso. È anche possibile che ci sia effettivamente qualcosa di 1px che occupa quello spazio, come una cornice nascosta o qualcosa del genere. Questi potrebbero essere completamente fuori dal segno poiché non so come hai fatto la cosa.

Una possibile soluzione consiste nel visualizzare una delle immagini come sfondo di un div anziché utilizzare un tag img, in questo modo verrà semplicemente troncato invece di eseguire il wrapping se è 1px disattivato.

Answer 11

Ho visto questo problema una volta, e come si è scoperto l'utente aveva ingrandito la pagina e lo zoom ha causato problemi di arrotondamento matematico. Avevo inavvertitamente ingrandito la mia pagina al 120%, avevano solo il tuo normale 100%.

Answer 12

Con l'aggiornamento corrente nel browser, le impostazioni di zoom del browser utilizzano le impostazioni dpi del sistema.

In Windows 7, l'impostazione dpi = 125% produrrà l'effetto zoom al 100% dello zoom della finestra del browser.

Quindi, questo non è correlato all'HTML. Ad esempio, le impostazioni di width = 300px produrranno una casella di dimensioni diverse sullo stesso browser con le stesse impostazioni di zoom ma con impostazioni dpi diverse.

Dpi = 125% produrrà una scatola più grande.

Quindi, se si vuole ridurre il livello di zoom, o diminuire il browser premendo CTRL + -, o ridurre le impostazioni dpi del sistema seguenti operazioni

1. Per le finestre 10 http://www.windows10update.com/2015/05/windows-10-tutorials-79-change-dpi-scaling-level-for-displays/
2. per Windows 7 http://www.lawfirmsoftware.com/support/change_dpi_settings_windows_7.htm