Non AdBlock cambiamento come Chrome visualizza le pagine?
-
26-09-2019 - |
Domanda
Sto progettando / costruzione di un sito, e come un bravo sviluppatore ho tenuto d'occhio su come le cose rendono in tutti i browser più diffusi - le versioni attuali di Firefox, Chrome, Safari (per Windows) e Chrome e Internet Explorer (8, non l'anteprima 9).
In ogni caso, tutto sembrava assolutamente bene in Chrome per me, ma un mio amico che mi è stata dà qualche feedback mi ha detto: "Oh, a proposito, il sito viene visualizzato orribilmente in Chrome." Gli ho dato le "opere sulla mia macchina" standard di risposta, e lui mi ha risposto che pensava che deve essere un problema di estensione.
Lui mi ha dato un breve elenco delle estensioni popolari che usa, e dopo un po 'di tentativi ed errori ho scoperto le bugie problema con AdBlock. Io non voglio annoiarvi troppo con i dettagli del problema di rendering vero e proprio, ma abbiamo notato qualcosa di strano. Non che AdBlock stava bloccando qualcosa sulla pagina, ma che la semplice presenza di AdBlock in Chrome è stata la causa del problema. Lo so perché il problema persiste anche quando a) mi fermo AdBlock, e b) quando ho espressamente escludere tale pagina / sito dall'essere AdBlocked.
Da allora ho risolto il problema (che aveva notato in precedenza in un Firefox 3.0 "BrowserShot", ma fissa il bug all'interno FireBug solo - non avevo applicata alla copia reale ancora), ma mi ha lasciato chiedevo se ci sono altri problemi che dovrei essere a conoscenza.
Non sembra essere una questione di stranezze vs. modalità Standard sia. document.compatMode ancora spettacoli "CSS1Compat" (modalità Standard), e quando rimuovo la definizione doctype alla modalità di trigger stranezze, il sito rende ancora correttamente (anche se con un po 'imbottitura cambiato in posti - niente di cui preoccuparsi)
.Qualcuno ha notato questo problema prima? Non AdBlock cambiare radicalmente il modo in cui Chrome rendering delle pagine, anche se non è attiva su quel sito specifico?
Modifica # 1:
Si ottiene più strano. Ho cercato di creare un esempio, ma non sarebbe il rendering in modo improprio per qualche motivo. In ultima analisi, ho copiato l'originale (vale a dire non) html all'interno di un nuovo file, e gettò l'intero file CSS in un tag <style>
nel <head>
del documento. E ' ancora funzionato.
Un po 'di tentativi ed errori, e ho stabilito che il problema esiste solo quando tra cui CSS tramite <link rel="stylesheet">
ma non via <style>
.
Potrebbe qualcuno si prega di spiegare cosa sta succedendo qui?
Modifica # 2:
Ecco il codice con cui sto lavorando:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="outer">
<img src="placeholder.png" width="150px" height="150px" />
<div id="inner">
<h1>Test</h1>
<p>Lorem ipsum blah blah blah</p>
</div>
</div>
</body>
</html>
CSS:
#outer {
border: 1px solid #000;
width: 700px;
}
#inner {
float: right;
width: 540px;
}
Se vuoi provare questo per te stesso, ho messo alcuni file sul mio server:
Soluzione
Sembra essere un problema nel modo in cui Chrome rimborsi contenuto dopo css è stato modificato - è possibile riprodurre esattamente la stessa resa nel seguente modo:
- Disattiva Adthwart, reload cromato.
- caricare la pagina (uno dei due).
- Vai nella finestra di ispezione Chrome -. Selezionare l'elemento interno div #
- Disattiva, riattivare, l'attributo
float: right;
CSS.
Sarebbe una buona idea di presentare un bug report, se non esiste già -. È sia un WebKit o un bug Chrome