Hvordan lage CSS Effektiv for IE

October 3

Internet Explorer har et rykte blant webutviklere for å være vanskelig å jobbe med på grunn av mange CSS bugs. Microsoft er også tregere til å legge til nye funksjoner, særlig den visuelle effekter CSS level 3 egenskaper kan skape. I løpet av årene, ble mange hacks og skript utviklet for å overvinne begrensninger av IE nettlesere, men de fleste utviklerne begynte å rynke på klønete løsninger. Et sett med teknikker som spenner fra enkle reparasjoner til en sofistikert Java løsning vil gjøre det lettere for deg å lage CSS fungerer som det skal i IE.

Bruksanvisning

1 Bruk en skikkelig dokumenttypedeklarasjon. Dette vil løse mange bugs i eldre versjoner av Internet Explorer. Siden HTML5 kom ut, dokumenttypen eller "doctype" er enkelt og lett å huske:

<! DOCTYPE HTML>

Dette er den aller første linje i en webside HTML-kode. Selv om din webside inneholder allerede en dokumenttype erklæring, bør du vurdere å bytte ut noen eldre versjon med dette for å minske forvirring om hvorvidt siden er overgangs eller streng.

2 Legg en "reset" stilark til din Web utvikling arsenal. Dette er en type stilark som fjerner standard styling som nettlesere gjelder for websider, slik at du ikke lenger trenger å lure på hva margverdier Internet Explorer bruker kontra de verdiene som brukes av Firefox. Den mest populære reset er fortsatt Eric Meyers 'reset. Få reset koden fra Meyers webområde på meyerweb.com/eric/tools/css/reset/ og lagre den i samme mappen der du lagret websiden. Legg til denne linjen under "<title>" koder i websiden for å legge til reset:

3 Bruk betinget kommentarer å legge i stilark bare når den besøkende bruker en bestemt versjon av Internet Explorer:

<! - [If IE 6]>
<Link rel = "stylesheet" href = "ie6.css">
<! [Endif] ->

Inne i IE-only style sheet, legge til CSS som korrigerer feil kjent for IE. To store bugs å se opp for er dobbel marginer og feil boks modellberegninger. Den første feilen fører marginer å doble opp i stedet for overlappende. Den andre feilen bevirker IE for å beregne polstring og grenser som en del av bredden av innholdet for et element, for eksempel en div. Tweaking marginer og bredder for IE-only CSS vil fikse disse.

4 Installer "Modernizr" Javascript for å websiden. Dette skriptet finner ut hva en brukers nettleser gjør og støtter ikke, og deretter legger klasser til "<body>" tag. Last ned skriptet og lagre den i samme mappe hvor websiden er plassert. Legg det til HTML-koden over avsluttende "</ head>" tag med "<script>" koder:

Følg dokumentasjon på Modernizr nettsted for å finne ut hvilke funksjoner den snuser ut og hvordan du bruker klassene.