Share
Internet Explorer - la rovina della maggior parte degli sviluppatori web. Fino al 60% del tuo sviluppo può essere sprecato solo cercando di eliminare bug specifici di IE che non sono realmente un uso produttivo del tuo tempo. In questo tutorial, imparerai i più comuni bug di IE e disparità di rendering e come schiacciarli o affrontarli facilmente.
A proposito, se non vuoi seguire personalmente questo processo, o se hai problemi a correggere un particolare bug di IE, prova il servizio di correzione dei problemi del browser IE su Envato Studio.
Servizio di correzione dei problemi del browser IE su Envato Studio In alternativa, puoi trovare utile questo elemento di Envato Market: Rilevamento facile e veloce del browser. Ti consente di determinare rapidamente quale browser viene utilizzato e visualizzare le notifiche o intraprendere altre azioni basate su di esso.
Rilevamento del browser facile e veloce Centrare un elemento è probabilmente qualcosa che ogni sviluppatore web deve fare durante la creazione di un layout. Il modo più semplice e più versatile per centrare un elemento è semplicemente aggiungere margine: auto; all'elemento pertinente. Il metodo sopra si occuperà di centrare l'elemento indipendentemente dalla risoluzione e / o dalla larghezza del browser. La modalità IE 6 in quirks, tuttavia, decide di gestirla nel modo più sfortunato possibile: non gestendola affatto.
Considera il seguente codice:
#container border: solid 1px # 000; sfondo: # 777; larghezza: 400 px; altezza: 160px; margine: 30px 0 0 30px; #element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 100 px; margine: 30px auto;
L'output che ti aspetti:
Ma ciò che IE ti dà in realtà:
Ciò è principalmente dovuto a IE6 in modalità strane e al di sotto non riconosce il auto valore che abbiamo impostato su margine proprietà. Fortunatamente, questo è facilmente risolto.
Il modo più semplice e affidabile per centrare il contenuto per IE6 e di seguito è quello di applicare allineamento del testo: centro all'elemento padre e quindi applicare allineamento del testo: a sinistra all'elemento da centrare per assicurarsi che il testo al suo interno sia allineato correttamente.
#container border: solid 1px # 000; sfondo: # 777; larghezza: 400 px; altezza: 160px; margine: 30px 0 0 30px; allineamento del testo: centro; #element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 100 px; margine: 30px 0; allineamento del testo: a sinistra;
Quasi tutti gli sviluppatori web utilizzano gli elenchi per creare la sua navigazione. Di solito, si crea l'elemento contenitore, si creano alcuni collegamenti all'interno e quindi si fanno galleggiare le ancore nella direzione desiderata e le si chiama un giorno. Generalmente. IE però decide di renderlo molto più complicato. Sfoglia attraverso il seguente codice:
ul list-style: none; ul li a display: block; larghezza: 130 px; altezza: 30 px; allineamento del testo: centro; colore: #fff; fluttuare: a sinistra; sfondo: # 95CFEF; bordo: solido 1px # 36F; margine: 30px 5px;
Un browser conforme allo standard lo rende così:
E la schermata di IE:
Non è una navigazione particolarmente piacevole se me lo chiedi. Fortunatamente, ci sono 2 correzioni che puoi provare.
Il modo più semplice per combattere questo è quello di far flottare gli elementi li stessi invece degli elementi di ancoraggio. Basta aggiungere questo e si dovrebbe essere fatto.
ul li float: sinistra;
Il secondo modo è applicare display: in linea all'elemento Li allegato. Oltre a correggere questo bug, corregge anche il bug del doppio margine menzionato di seguito. Tuttavia, ai puristi potrebbe non piacere mettere gli elementi di blocco all'interno degli elementi inline.
ul li display: inline
Questo bug è probabilmente tra i primi in cui uno sviluppatore web si imbatterà e sarà specifico per Internet Explorer 6 e versioni successive. Attivarlo è semplice come fluttuare un elemento e quindi applicare un margine nella direzione in cui è stato flottato. E voilà! Il margine sarà raddoppiato nell'output reso. Non proprio qualcosa che avresti desiderato durante la creazione di un layout perfetto per i pixel.
Considera questo codice:
#element background: # 95CFEF; larghezza: 300 px; altezza: 100 px; fluttuare: a sinistra; margine: 30px 0 0 30px; bordo: solido 1px # 36F;
Sui browser conformi agli standard, ecco come appare:
Ma ecco come IE 6 decide di renderlo:
La correzione per questo specifico bug è da applicare display: in linea all'elemento flottato e tutto funziona come dovrebbe. Il nostro codice precedente ora cambia in:
#element background: # 95CFEF; larghezza: 300 px; altezza: 100 px; fluttuare: a sinistra; margine: 30px 0 0 30px; bordo: solido 1px # 36F; display: inline;
Come parte della creazione di un layout, potrebbe essere necessario creare elementi con altezze molto piccole come bordi personalizzati per gli elementi. Di solito, devi solo aggiungere altezza: XXpx alle dichiarazioni dello stile e dovresti farlo. O così hai pensato. Controlla la pagina in IE e probabilmente eseguirai un doppio take.
Ad esempio, guarda il seguente codice:
#element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 2px; margine: 30px 0;
E l'output è esattamente come previsto: un elemento di 2 px con un bordo di 1 px.
E in IE:
La causa di questo bug è piuttosto semplice: IE semplicemente rifiuta di dimensionare un elemento più piccolo della dimensione del carattere impostato. Semplicemente impostando la dimensione del carattere su 0 puoi avere un elemento piccolo e corto come desideri.
#element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 2px; margine: 30px 0; dimensione carattere: 0;
Il prossimo modo migliore per affrontare questo bug è quello di applicare overflow: nascosto all'elemento in modo che collassi all'altezza prevista.
#element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 2px; margine: 30px 0; overflow: nascosto
Questo bug alza la sua brutta testa quando in un layout si imposta il contenitore genitore straripamento proprietà a auto e posizionare un oggetto relativamente posizionato al suo interno. L'oggetto relativamente posizionato viola i limiti e gli overflow dell'elemento principale all'esterno. Lasciami dimostrare. Guarda il seguente codice:
#element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 150 px; margine: 30px 0; overflow: auto; #anotherelement background: # 555; larghezza: 150 px; altezza: 175 px; posizione: relativa; margine: 30 px;
E l'output atteso:
E l'output di IE:
Il modo più semplice per risolvere questo fastidioso bug è quello di posizionare l'elemento genitore relativamente.
#element background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 300 px; altezza: 150 px; margine: 30px 0; overflow: auto; posizione: relativa;
L'errata interpretazione di Internet Explorer del modello box è forse il suo imperdonabile errore. IE 6 in modalità semi-standard compatibile sopporta questo problema, ma questo problema può ancora essere attivato dalla modalità quirks.
Due elementi div. Uno con la correzione applicata e uno senza. La differenza tra larghezza e altezza è la somma delle imbottiture applicate su ciascun lato.
Sono sicuro che il dilemma con il modello di box non richiede né spiegazioni né dimostrazioni, quindi ti darò la soluzione.
Il trucco è impostare la larghezza normalmente per tutti i browser conformi agli standard, scegliere solo IE5 / 6 e quindi alimentarlo con la larghezza corretta. È così che normalmente vai avanti:
#element width: 400px; altezza: 150 px; imbottitura: 50px;
Questo ora cambia in:
#element width: 400px; altezza: 150 px; \ altezza: 250px; \ width: 500px
In sostanza, si aggiunge il padding alla larghezza originale e lo si invia a IE 6. La correzione mira a IE 6 in modalità quirk da sola, quindi non è necessario preoccuparsi di IE 6 in modalità normale..
Impostare un'altezza minima per un elemento è assolutamente necessario quando si tenta di convertire un bel design in un design perfetto di pixel. Sfortunatamente, IE ignora completamente il min-height proprietà invece prendendo l'altezza dichiarata come altezza minima.
La correzione è un trucco creato da Dustin Diaz. Utilizza il !importante dichiarazione per farlo funzionare. Lo snippet sembra così:
#element min-height: 150px; altezza: auto! importante; altezza: 150px;
Il secondo modo è sfruttare il fatto che IE non può analizzare i selettori figli.
#element min-height: 150px; altezza: 150 px; html> body #element height: auto;
Uno dei concetti importanti per la creazione di layout senza tabella utilizzando CSS è costituito da elementi mobili. Nella maggior parte dei casi, IE6 gestisce questo problema con disinvoltura, ma in alcuni casi non funziona. Di fronte al contenuto infrangibile o agli elementi la cui larghezza supera la larghezza del genitore, provoca scompiglio con i layout. Lascia che ti mostri.
Considera questo pezzo di codice:
http://net.tutsplus.com/
#element, #anotherelement background: # 95CFEF; bordo: solido 1px # 36F; larghezza: 100 px; altezza: 150 px; margine: 30 px; imbottitura: 10px; fluttuare: a sinistra; #container background: # C2DFEF; bordo: solido 1px # 36F; larghezza: 365 px; margine: 30 px; imbottitura: 5px; overflow: auto;
L'output atteso visualizzato su un browser conforme agli standard:
In IE:
Come puoi vedere, il primo div si espande per adattarsi al contenuto che alla fine interrompe il layout.
Non esiste una soluzione elegante per questo bug. L'unico modo per salvare il layout è applicarlo overflow: nascosto all'elemento ma a costo di ritagliare il contenuto infrangibile. Il layout verrà salvato ma il contenuto extra non lo sarà.
#element background: # C2DFEF; bordo: solido 1px # 36F; larghezza: 365 px; margine: 30 px; imbottitura: 5px; overflow: nascosto;
IE 6 aggiunge la spaziatura verticale anche se nessuno è specificato in casi specifici. Diamo prima un'occhiata al codice.
ul margine: 0; padding: 0; list-style: none; li a background: # 95CFEF; blocco di visualizzazione;
Come dovrebbe essere:
Cosa IE ci offre:
Fortunatamente, ci sono una miriade di correzioni che potresti provare.
La soluzione più semplice è definire semplicemente una larghezza per i tag di ancoraggio e voilà! tutto rende come dovrebbe La dichiarazione di una larghezza attiva l'elemento IE specifico dell'elemento hasLayout proprietà. Potresti invece definire un'altezza se vuoi.
li a background: # 95CFEF; blocco di visualizzazione; larghezza: 200 px;
Il prossimo metodo è semplicemente di far galleggiare l'ancora a sinistra e quindi di cancellarla.
li a background: # 95CFEF; fluttuare: a sinistra; chiaro: a sinistra;
Il terzo metodo è aggiungere display: in linea all'accludere Li elemento. Questo risolve anche il bug a doppio margine, come notato sopra.
li display: inline;
Ed ecco qui: i nove bug più comuni per il rendering di IE e come schiacciarli. Spero che questo ti abbia salvato sangue, sudore e lacrime mentre fai il debug della tua prossima creazione. Guarderò frequentemente la sezione commenti; quindi caricala qui se hai difficoltà ad implementare le correzioni qui annotate.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!
Se sei stanco di strapparti i capelli a causa di bug confusi, dai un'occhiata a Envato Studio dove puoi chiedere aiuto a sviluppatori selezionati a mano che amano schiacciare i bug e fare correzioni!
Accentsconagua