Il migliore hack di sempre per IE
Parafrasando il nostro amico Laburno:
<!--[if IE]>
<style>
html, body, * {
display: none;
}
</style>
<![endif]-->
Se superate il test vuol dire che siete dei bravi webdesigner ahhaah
a parte gli scherzi, facciamo un elenco delle cose da tenere conto quando visualizziamo un sito su explorer? Vai, chi è il primo?
Amazon-Box creato da Giuseppe Frattura
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
29 Commenti
Dai dai, inauguro con l’hack del model box
Volete anche il codice ?
ma sì dai, facciamo le cose complete. basta anche un link a qualcosa che c’è già in rete che lo spiega
se non sbaglio ho scritto già qualcosa in merito su iwd, se lo trovo lo linko.
Io uso il buon vecchio hack del family:
div.class {
width:400px;
voice-family: “\”}\”";
voice-family:inherit;
width:300px;
}
Non sto a spiegare come, perchè, quando..
Uno degli hack che devo fare più spesso (spesso l’unico) è sistemare il margin di ie6 con un margin-top:-13px;
Nell’ultimo sito che ho fatto invece ho dovuto fare millamila modifiche, perchè ho messo un dropdown orizzontale.. e il resto è storia.
LOLOLOLOLOL
Per superare molti probemi di I.E.6 io uso spesso il tag !important nei fogli di stile
@Dimitri: nono spiega spiega, questa mi manca
La prima cosa che terrei a mente per un sito crossbrowser con IE è il padding interpretato diversamente (firefox li vede esterni e ie esterni).
Seconda cosa, il display:inline per gli elementi che flottano se non si mette display inline il margine viene raddoppiato mi sembra che questa cosa valga solo per ie6 e precedenti ma scassa molto le scatole.
Terza cosa che reputo la prova più difficile da risolvere ma anche la più avvincente per IE 6 e precedenti il famigerato peek a boo bug su cui non esiste una soluzione standard ma sta alla valutazione case by case dei vari layout.
In generale suggerisco un link per hack sui css che fornisce dati molto completi . Considero molto importante questo sito visto che tra ie5 ie6 e ie7 ci sono grossi cambiamenti e ogni versione di ie ha i suoi hack particolari.
Il sito è:
http://www.webdevout.net/browser-support-css
Migliori hack per ie di sempre:
display:inline; sui float
settare altezza in auto e in px con important per ottenere l’effetto del min-height in firefox
definizione elemento css *html per ie6 e precedenti per creare una regola esclusiva per ie
definizione elemento css *:first-child+html per ie7 e precedenti per creare una regola esclusiva per ie
scrittura degli elementi floattanti in linea per evitare margini indesiderati
le varie e fantasiose soluzioni per il temibile peek a boo bug (per ie6 e precedenti)
if per ie6 e precedenti per supportare le immagini in png con solo css (ie7 non supporta i behavior ma vede i png con trasparenze)
@Lauryn: non puoi fare web design e non conoscere il problema del box model
ecco un’articolo che scrissi mooolto tempo fa: http://webstandards.dimix.it/2005/10/27/come-funziona-il-box-model/
Ora non so se sono io che sbaglio qualcosa… ma avete mai avuto a che fare con qualcosa del genere?
XXX
YYY
Su FF, Opera e Safari viene visualizzato come ci si aspetta… Naturalmente su IE6/7 no!
L’unico modo per visualizzarlo come si deve è dare al tag “li” il display a inline-block.
Ops… sono spariti i tag
Comunque è un “ul” dove nei “li” c’è un elemento con il float impostato (right o left è uguale) e un elemento con il display a block (per esempio un div)
@dimitri: lo conosco, ma non conosco l’hack del voice family.
e ora mi fai venire un dubbio colossale…faccio dei test.
grazie del link!
@Kimerio: Non è molto chiaro ma ie ha molti problemi con le liste in linea di massima se si vogliono ottenere menu orizzontali con le liste si può usare il display inline sui tag li o un float con il display block.
Ci sono molte discussioni su quale dei due approcci sia maggiormente cross browser, personalmente penso che sia più opportuno valutare case by case in base al layout/codice/grafica/obbiettivo. Sennò il web designer che ci sta a fare?
per il tuo caso suggerirei di utilizzare un float + display block sugli li evitando di inserire div all’interno dei tag li userai questi come elementi di blocco e potrai settare più comodamente altezza, larghezza riempimenti ecc ecc.
Ricordo anche di qualcuno che faceva lo stesso metodo ma usando il tag a come elemento di blocco all’interno di li ma personalmente non mi piace molto come sistema.
@Lauryn: Ma figurati.
L’hack del voice family è uno dei tanti usati per questo problema.
Che dubbio hai avuto?
@Dimitri: ma cosa fa in pratica il voice family? non l’ho mai usato…
il dubbio che ho avuto è che abbia sempre usato box completamente sbagliati, ma non è possibile perchè dall’aspetto e misure mi sembravano ok…devo recuperare un vecchio sito e fare un raffronto…forse è perchè il browser 5.5 oramai lo ignoro da un bel po’…
@Lauryn:E’ una proprietà per definire una voce con cui verranno letti i tasti nel css, per vedere come viene usata puoi vedere i template di css zen garden che se non ricordo male richiedono obbligatoriamente l’uso del voice family. essendo una proprietà nuova alcuni vecchi browser non la capiscono/interpretano e può essere utilizzata per alterare il rendering di una pagina. Nell’articolo dimitri spiega molto meglio.
@Dimitri:Celik Tantek non era quello che aveva fatto ie5 per mac che poi la microsoft non voleva distribuire perchè troppo avanzato rispetto a ie5 per pc?
@Lauryn: Ha detto benissimo Mauro.
@Mauro: Si, è quello che ha lavorato su IE per Mac.
@Dimitri:Quell’uomo ha inventato il primo browser web compliant è un mito…non sapevo avesse un sito suo. Grazie dell’info!
Non si smette mai di imparare, visto?
Grazie ragazzi. Ma ora mi chiedo: non è il caso di lasciar perdere gli hack antecedenti ie 5.5?
Se nessuno usa browser precedenti a ie 5.5 si possono lasciar perdere, nel caso in cui si deve fare un template per un applicativo sulla intranet di un’azienda che usa ie 5…beh in quel caso conviene sapere qualcosa in più. E’ anche vero che basterebbe dire all’azienda “aggiornatevi” ma non tutti sono così accondiscendenti credo…Io credo sia utile sapere i problemi che ci possono essere con i vari browser le soluzioni poi sono varie, ie è il browser su si applicano maggiori hack ma anche opera, safari,netscape, ie per mac hanno i loro. E non sarebbe giusto fare un sito solo per firefox…
Suggerirei gli script di Dean Edwards per rendere IE5+ (win) standards-compliant…
Mamma mia come odio IE!
In effetti questo e’ il piu’ completo hack per IE, anche se non e’ il solo che utilizzo.
Ma perche’ devono sempre complicarci le cose! Voglio proprio vedere quando saranno supportati i CSS3…
Speriamo bene, ultimamente ha fatto qualche passo avanti!
@ Dimitri
Tiggiuro che il Tantek Box Model Hack IE6 me lo ignora bellamente di recente, eppure non dovrebbe essere cambiato nulla
http://tantek.com/CSS/Examples/boxmodelhack.html
Approfitto anche per postare una tabellina utile su HTML.it
http://www.html.it/articoli/2217/tabellaCompatibilita.html
Per soluzioni estreme può far comodo fare regole specifiche per alcuni browser sfruttando i loro limiti di interpretazione.
@Iria: mmm ora non voglio di cavolate.. però mi pare che solo IE6- abbia questo problema e non IE6+.. :-/
Io , dopo la lettura e i commenti del vostro ultimo articolo pubblicato ho scritto un post raccogliendo le varie tecniche che uso, possibilmente evitando hacks.
http://www.antoniofullone.it/articoli/640/realizzare-layout-compatibili-con-internet-explorer-6/
@antonio: ho letto il tuo articolo. direi che è abbastanza completo. lo consiglio a tutti
ahahhahahah ottima idea
Dannata microsoft.. Chi ha microsoft, secondo me, crede che debba usare IE e non ve ne esistano altri..