IE9 esegue il rendering di una linea bianca nella parte inferiore della pagina

Recentemente ho notato in diverse pagine Web e alcune delle mie, che quando vengono visualizzate in Internet Explorer 9, quando non è in modalità Quirks, restituisce una linea bianca, circa 1px, nella parte inferiore della pagina. È come se il tag html fosse con padding-bottom: 1px e avvolto in un altro elemento con sfondo bianco (ma non lo è, e non ha padding). Sembra che le differenze tra gli standard IE9 e la modalità quirks vengano visualizzate quando si determina la larghezza di un elemento wrapping, ma verticalmente. Sembra anche che il contenuto di un elemento venga spinto di 1px da un elemento precedente, come il loro contenuto, ma, non i margini o i bordi, si sovrappongono alle dimensioni dell'elemento successivo.IE9 esegue il rendering di una linea bianca nella parte inferiore della pagina

Non riesco a determinare esattamente cosa lo causa. A volte, una pagina contiene 2 tabelle e tutto va bene. Quindi è necessario aggiungere un terzo e la linea si presenta. Non ha nemmeno bisogno di essere tabelle btw.

A volte, il ripristino del css lo risolve. Impostare la stessa line-height che abbiamo sul corpo per link:

body { 
    line-height: 1 
} 
a, links, visited { 
    line-height: 1 
}

correzioni, ma non sempre. L'unica cosa che posso fare è controllare elemento per elemento, disabilitando/abilitando le loro regole CSS fino a quando non c'è più.

Ho notato che quando ci sono elementi come tabelle, input, textareas, questo problema è più probabile che accada. 'reimpostare' i loro attributi, a volte, lo risolve anche.

So che sarebbe più semplice fornire un codice come esempio, ma come ho detto, non ho potuto determinare un modello per esso. Posso darti alcuni esempi di siti/urls noto questo errore (devi guardare in fondo alla pagina e vedere la differenza tra IE e un altro browser, come Firefox):

casinosdelmundo.info, gatosabido.com .br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (quelli con bg bianco, o quasi bianco, cambiano lo sfondo del corpo con f12 , lo strumento per sviluppatori, e vedrai). Ho trovato un esempio anche qui a StackOverflow (come oggi, la pagina principale Stackoverflow.com mostra anche quella linea, ma può cambiare poiché, a volte il problema appare o scompare quando nuovi elementi appaiono o vengono rimossi):

questa domanda è il bianco-line: Make link in table cell fill the entire row height

questo non ha: FireFox 3 line-height

Controllare questo screenshot, se ancora non hai visto che cosa im parlando: enter image description here

la presenza di questo problema su siti consolidati (o non) mi fa sembrare un bug di IE9 e l'unica soluzione definitiva è sempre usare lo sfondo bianco, quindi nessuno noterà la linea bianca (la linea sarà comunque lì) . ma questo ovviamente non è l'opzione migliore. Non ho mai trovato questa linea bianca in Chrome o Safari.

Quindi, qualcuno ha affrontato lo stesso problema e ottenuto una soluzione migliore?

fonte

2011-10-06 LichKing

Ho visto diversi IE9 rendendo domande sul SO di recente, piccoli ritocchi tendono a risolverli (come come si pasticciato con la line-height). È praticamente garantito un bug di IE. Forse dovresti registrare questo bug con MS. – invertedSpear

Hmm, ho appena ricevuto un'e-mail da loro: "Grazie per il vostro feedback, siamo stati in grado di riprodurre il problema e di esaminarlo. Con i migliori saluti, il team di Internet Explorer." – LichKing

Ora puoi tornare a fare i quotidiani mentre attendi che MS risolva, Arthas. – CheckRaise

Non sono sicuro, perché non c'è HTML qui, ma è molto simile al comportamento standard del browser, quando mostra contenuto in linea. È dovuto al fatto che quando il testo viene visualizzato il browser deve lasciare uno spazio in basso per lettere e simboli come: ",", "y", "p" e così via, perché in quelle lettere c'è un parte che sporge verso il fondo.Si può capire meglio di cosa sto parlando quando si guarda a questa immagine: example of how inline content is displayed

quindi se avete un po 'di markup come

<body> 
    <div></div> 
    <textarea></textarea> 
</body>

si otterrà quello spazio in più sul fondo. Per sbarazzartene devi utilizzare l'elemento di blocco o impostare sul tuo elemento inline uno stile css 'display: block'

fonte

2011-10-17 17:48:24 user907860

Ho trovato una soluzione al problema, se idiota: imposta l'interruttore di Ingrandisci/Ripristina fino a Massimizza la finestra del browser (= testo del suggerimento, indica che la finestra si trova in uno stato non principale). Rendi la finestra del browser più piccola dello schermo. Premere F11 in questo stato e non vi è alcuna linea bianca nella parte inferiore dello schermo (Win7 x32 & x64). (BTW, la dose FF non presenta questo problema ed è la migliore alternativa)

fonte

2012-04-20 11:58:05

Accade quando si utilizzano caratteri di dimensioni frazionali.

Ad esempio, stackoverflow utilizza h2 {font-size: 140%;} body { font-size:80%;}, che restituisce una dimensione carattere totale del 112% per h2. (! Compresi rounding errors, evviva) Applicare che per dimensioni 16px di default, e si ottiene 17.93px

Provate voi stessi: getComputedStyle(document.querySelector('h2')).fontSize

browser hanno resa un momento difficile pixel frazionali, e quindi può confondersi e aggiungi un pixel in basso.

A proposito, anche Firefox ha qualche problema. La spaziatura tra le linee del footer è disattivata da un pixel.

La correzione è ovvia: utilizzare i pixel interi per dichiarare font-size s.

fonte

2012-04-20 12:53:53 user123444555621

Un altro modo sarebbe applicare un: dopo il contenuto al tuo corpo solo per IE e Edge. In questo modo ti libererai della linea bianca extra. Potremmo anche aver bisogno di jQuery in modo che il contenuto si applichi solo quando sei nella parte inferiore della pagina.

body{ 
    position:relative; 
    width:100%; 
} 
body:after{ 
    content: ""; 
    display:block; 
    background-color: #000; 
    height: 1px; 
    bottom: 0px; 
    position: fixed; 
    width: 100%; 
}

jQuery

//add a border to internet explorer 
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") { 
    //console.log(" iam inside"); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
      $("body").addClass("end-border"); 
     } 
     else { 
      $("body").removeClass("end-border"); 
     } 
    }); 
}

fonte

2017-05-24 13:53:23

IE9 esegue il rendering di una linea bianca nella parte inferiore della pagina

risposta

Problemi correlati