Internet Explorer 6 CSS teknikker

Det er en vanskelig jobb for webutviklere å lage sine nettsteder helt kompatibel med mengde tilgjengelige nettlesere, og Internet Explorer 6 er intet unntak. Allment akseptert som en ut-av-dato og standard bakover programmet, vil Internet Explorer 6 ta litt ekstra innsats for å få det til å fungere med en nettstedets CSS.

Font Dimensjonering

Internet Explorer 6 er litt kresen når det gjelder å endre størrelsen på tekst. Det vil ikke endre størrelsen på tekst satt i piksler, og det overdoes tekst satt i em-tallet. For å kompensere dette, må du først definere skriftstørrelsen i kroppen element i prosent, og deretter bruke dem er gjennom resten av stilark.

Kroppen kode vil se slik ut:

Body {font-size: 75%}

Når du har kalt dette, kan noe annet element settes som em er. For eksempel:

h1 {font-size: 3em}

Legg merke til at 75% vil gjøre det samme som en 12px innstilling, standard blir 16px. Ved hjelp av disse innstillingene, bør du få anstendige skrift resultater med ditt nettsted.

Dobbelt marginer på fløt elementer

En av de grunnleggende elementene i webdesign er å bruke "divs" for å justere innholdet i grupper for enklere administrasjon av elementer. I enkelte situasjoner kan det være lurt å "flyte" en div som lar deg flytte en div siden av en annen div, til venstre eller høyre. Dette vil forlate ingen plass mellom divs, så en margin må stilles for å skille dem. Koden vil se slik ut:

#left {float: right, width: 400px, margin-right: 10px}
#right {float: right, width: 200px}

Moderne nettlesere som Firefox og Safari vil gjøre dette riktig, mens Internet Explorer vil doble margin. Hvorfor akkurat den gjør dette er ikke kjent, men det er ganske frustrerende som en designer. For å fikse dette, må du legge til "inline" samtale.

#left {float: right, width: 400px, margin-right: 10px, display: inline}
#right {float: right, width: 200px, display: inline}

Dette vil løse problemet dobbel-margin og la andre nettleser upåvirket.

utvide Divs

Som eksempelet ovenfor, hvis du har to divs fløt ved siden av hverandre, er det vanlig praksis å ha et sett bredde for divs. Internet Explorer 6 vil bryte oppsettet dersom teksten på innsiden av det outstretches erklært bredde. Her er uendret koden.

#left {float: right, width: 400px,}
#right {float: right, width: 200px,}

Dette gjengis på riktig måte, men hvis det er for mye innsiden av #left div, vil #right div ikke riktig gjengi. For å fikse, bruke "overflow" samtale.

#left {float: right, width: 400px, overflow: hidden}
#right {float: right, width: 200px, overflow: hidden}

Dette vil skjule fylte teksten, slik at #right div å holde riktig plassert. Husk skjønt at det ikke tvinger ikke teksten til å bryte, men det vil spare justeringen.