Share
Internet Explorer - banen for de fleste webutvikleres eksistens. Opptil 60% av utviklingen din kan være bortkastet, bare prøver å squash ut IE-spesifikke feil som ikke er en produktiv bruk av tiden din. I denne opplæringen skal du lære om de vanligste IE-feilene og gjengivelsesforskjellene, og hvordan du enkelt kan knuse dem eller håndtere dem.
For øvrig, hvis du ikke vil gjennomgå denne prosessen selv, eller hvis du har problemer med å fikse en bestemt IE-feil, kan du prøve IE Browser Issue Correction-tjenesten på Envato Studio.
IE Browser Issue Correction-tjenesten på Envato Studio Alternativt kan du finne dette Envato Market-elementet nyttig: Enkel og rask nettleser deteksjon. Det lar deg raskt finne ut hvilken nettleser som brukes, og vise varsler eller ta andre handlinger basert på det.
Enkel og rask nettleser deteksjon Sentrering av et element er trolig noe hver nettutvikler har å gjøre mens du lager et oppsett. Den enkleste og mest allsidige måten å sentrere et element på er å bare legge til margin: auto; til det aktuelle elementet. Ovennevnte metode vil passe på å sentrere elementet uavhengig av oppløsningen og / eller nettbrettbredden. IE 6 i quirks-modus bestemmer imidlertid å håndtere dette på den mest uheldig måte som er mulig: ved ikke å håndtere det i det hele tatt.
Vurder følgende kode:
#container border: solid 1px # 000; bakgrunn: # 777; bredde: 400px; høyde: 160px; margin: 30px 0 0 30px; #element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 100px; margin: 30px auto;
Utgangen du kan forvente:
Men hva IE gir deg faktisk:
Dette skyldes hovedsakelig IE6 i quirks modus og under ikke å gjenkjenne auto verdien vi satte til margin eiendom. Heldigvis er dette enkelt løst.
Den enkleste og mest pålitelige måten å sitte på innhold for IE6 og under, er å søke tekstjustering: senter til foreldreelementet og deretter søke tekstjustering: venstre til elementet som skal senteres for å sørge for at teksten i den er riktig justert.
#container border: solid 1px # 000; bakgrunn: # 777; bredde: 400px; høyde: 160px; margin: 30px 0 0 30px; tekst-align: center; #element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 100px; margin: 30px 0; tekstjustering: venstre;
Nesten hver webutvikler bruker lister for å lage sin navigasjon. Vanligvis lager du beholderelementet, lager noen koblinger inni og flyter deretter ankrene i den retningen han ønsker og kaller det en dag. Som oftest. IE skjønt bestemmer seg for å gjøre det mye mer komplisert. Se gjennom følgende kode:
ul listestil: none; ul li a display: block; bredde: 130px; høyde: 30px; tekst-align: center; farge: #fff; flyte: venstre; bakgrunn: # 95CFEF; grense: solid 1px # 36F; margin: 30px 5px;
En standard kompatibel nettleser gjør det slik:
Og IE skjermbildet:
Ikke en spesielt behagelig navigasjon hvis du spør meg. Heldigvis er det 2 korrigeringer du kan prøve.
Den enkleste måten å bekjempe dette på er å flyte li-elementene selv i stedet for ankerelementene. Bare legg til dette, og du bør være ferdig.
ul li float: left;
Den andre måten er å søke skjerm: inline til det omsluttende li-elementet. I tillegg til å fikse denne feilen, korrigerer den også dobbeltmargin-feilen som er nevnt nedenfor. Purister kan ikke like å plassere blokkelementer inne i inlineelementer skjønt.
ul li display: inline
Denne feilen er trolig blant de første som en webutvikler som starter ut, kommer til å fungere og er spesifikk for Internet Explorer 6 og under. Utløsende det er like enkelt som å flyte et element og deretter bruke en margin i retningen den har blitt floated. Og voila! Marginen blir doblet i den gjengitte utgangen. Ikke egentlig noe du vil se frem til når du lager et perfekt bildeoppsett.
Vurder denne koden:
#element bakgrunn: # 95CFEF; bredde: 300px; høyde: 100px; flyte: venstre; margin: 30px 0 0 30px; grense: solid 1px # 36F;
På standarder som er kompatible med nettleseren, ser slik ut:
Men her er hvordan IE 6 bestemmer seg for å gjøre det:
Løsningen for denne spesifikke feilen er å gjelde skjerm: inline til det flytede elementet og alt fungerer som det skal. Vår tidligere kode endres nå til:
#element bakgrunn: # 95CFEF; bredde: 300px; høyde: 100px; flyte: venstre; margin: 30px 0 0 30px; grense: solid 1px # 36F; skjerm: inline;
Som en del av opprettelsen av en layout, må du kanskje lage elementer med svært små høyder som egendefinerte grenser for elementer. Vanligvis må du bare legge til høyde: XXpx til stilens erklæringer, og du bør være ferdig. Eller så tenkte du. Sjekk siden i IE, og du vil sannsynligvis gjøre en dobbel take.
For eksempel, se på følgende kode:
#element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 2px; margin: 30px 0;
Og utgangen er akkurat som forventet: Et 2 px element med en 1 px kantlinje.
Og i IE:
Årsaken til denne feilen er ganske enkel: IE nekter bare å størrelse et element mindre enn den angitte skriftstørrelsen. Bare å sette skriftstørrelsen til 0 lar deg få et element så lite og kort som du vil.
#element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 2px; margin: 30px 0; skriftstørrelse: 0;
Den neste beste måten å håndtere denne feilen er å søke på overløp: skjult til elementet slik at det kollapser til den tiltenkte høyden.
#element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 2px; margin: 30px 0; overløp: skjult
Denne feilen reagerer på sitt stygge hode når du er i en oppsett som du angir foreldrebeholderens flyte eiendom til auto og plasser en relativt posisjonert gjenstand inne i den. Den relativt posisjonerte gjenstanden bryter med grenseelementets grenser og overløper utenfor. La meg demonstrere. Se følgende kode:
#element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 150px; margin: 30px 0; overløp: auto; #anotherelement bakgrunn: # 555; bredde: 150px; høyde: 175px; stilling: relativ; margin: 30px;
Og forventet produksjon:
Og IEs utgang:
Den enkleste måten å fikse denne irriterende feilen på er å bare plassere overordnet elementet relativt.
#element bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 300px; høyde: 150px; margin: 30px 0; overløp: auto; stilling: relativ;
Internet Explorer's feilfortolkning av boxmodellen er kanskje den uforgivelige feilen. IE 6 i semi-standard kompatibel modus sidesteps dette, men dette problemet kan fortsatt utløses av quirks modus.
To div elementer. En med fikset påført og en uten. Forskjellen i bredde og høyde er summen av paddingene på hver side.
Jeg er sikker på at quandary med boxmodellen ikke trenger verken forklaring eller demonstrasjon, så jeg gir deg bare løsningen.
Trikset er å angi bredden normalt for alle standarder som er kompatible med nettleseren, målrett bare IE5 / 6 og deretter gi den den korrigerte bredden. Slik går du vanligvis på:
#element bredde: 400px; høyde: 150px; polstring: 50px;
Dette endres nå til:
#element bredde: 400px; høyde: 150px; \ høyde: 250px; \ bredde: 500px
I hovedsak legger du til polstringen til den opprinnelige bredden og matretter den til IE 6. Fikseringen målretter IE 6 i quirks-modus alene, så du trenger ikke bekymre deg for IE 6 i normal modus for å slå ting opp.
Å sette en minimumshøyde til et element er absolutt viktig når du prøver å konvertere et vakkert design til en perfekt design. Dessverre ignorerer IE helt min-høyde eiendom i stedet tar høyde oppgitt som minimum høyde.
Fiksingen er et hack laget av Dustin Diaz. Det benytter !viktig erklæring for å få det til å fungere. Utklippet ser slik ut:
#element min-høyde: 150px; høyde: auto! viktig; høyde: 150 piksler;
Den andre måten er å dra nytte av det faktum at IE ikke kan analysere barnselektorer.
#element min-høyde: 150px; høyde: 150px; html> body #element height: auto;
Et av de viktige konseptene med å bygge bordløsninger med CSS er flytende elementer. I de fleste tilfeller håndterer IE6 dette med aplomb, men i visse tilfeller fumler det. Når den står overfor ubrytelig innhold eller elementer hvis bredde overskrider foreldrenes bredde, forårsaker det ødeleggelse med layoutene. La meg vise deg.
Vurder denne delen av koden:
http://net.tutsplus.com/
#element, #anotherelement bakgrunn: # 95CFEF; grense: solid 1px # 36F; bredde: 100px; høyde: 150px; margin: 30px; polstring: 10px; flyte: venstre; #container bakgrunn: # C2DFEF; grense: solid 1px # 36F; bredde: 365px; margin: 30px; polstring: 5px; overløp: auto;
Den forventede utgangen som vist på en standardkompatibel nettleser:
I IE:
Som du kan se, utvider den første div seg selv for å passe innholdet som til slutt bryter oppsettet.
Det er ingen elegant løsning for denne feilen. Den eneste måten å lagre oppsettet på er å søke overløp: skjult til elementet, men på bekostning av klipping av det ubrydelige innholdet. Oppsettet blir lagret, men det ekstra innholdet vil ikke.
#element bakgrunn: # C2DFEF; grense: solid 1px # 36F; bredde: 365px; margin: 30px; polstring: 5px; overløp: skjult;
IE 6 legger til vertikal avstand, selv om ingen er spesifisert i bestemte tilfeller. La oss se koden først.
ul margin: 0; padding: 0; list-style: none; li a bakgrunn: # 95CFEF; skjerm: blokk;
Hvordan det skal se ut:
Hva IE gir oss:
Heldigvis finnes det en mengde reparasjoner du kan prøve.
Den enkleste veien ut er å bare definere en bredde for ankeretiketter og voila! alt gjør det som det skal. Deklarere en bredde utløser elementets IE-spesifikke hasLayout eiendom. Du kan i stedet definere en høyde hvis du vil.
li en bakgrunn: # 95CFEF; skjerm: blokk; bredde: 200px;
Den neste metoden er å bare flyte ankeret igjen og deretter rydde det.
li en bakgrunn: # 95CFEF; flyte: venstre; fjern: venstre;
Den tredje metoden er å legge til skjerm: inline til inneslutningen li element. Dette løser også dobbeltmargelinjen som nevnt ovenfor.
li display: inline;
Og der har du det: de ni mest vanlige IE-renderingene, og hvordan å squash dem. Forhåpentligvis har dette spart deg blod, svette og tårer mens du feilsøker din neste skapelse. Jeg vil se på kommentarseksjonen ofte; så chime her hvis du har problemer med å implementere reparasjonene som er nevnt her.
Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Glad koding!
Hvis du er lei av å trekke håret ut på grunn av forvirrende feil, kan du sjekke ut Envato Studio hvor du kan spørre hjelp fra håndplukkede utviklere som elsker å knuse feil og gjøre feil!
Accentsconagua