CSS Problemer med Maksimal Bredde

May 21

Mange moderne nettsteder bruker gjennomgripende stilark (CSS), en web-standard utviklet for å administrere stil, struktur og utforming av HTML-elementer og sider. Den "max-width" hotellet ble introdusert med CSS2 og fungerer likt med nyere CSS3 standard. Ved å bruke "max-width" du kan sette en væske, justerbar verdi for innholdet i stedet for en statisk en. Dette kan brukes effektivt for bilder og for oppsett som skalerer til den besøkendes skjermoppløsning. Den maksimale bredden kan settes i piksler, centimeter eller som en prosentandel av den totale bredden på skjermen.

nettleser~~POS=TRUNC

For det meste, nettlesere støtter "max-width" attributt i CSS. Dette betyr at de fleste Internett-brukere vil ikke ha noen problemer med layout, spesielt de som bruker Firefox, Chrome og Opera nettlesere. Men det er betydelige feil angående maks bredde i Internet Explorer 5.5, 6.0 og 8.0, samt Safari 1.3. Noen av disse nettleserne er ikke lenger i bruk, men mellom Internet Explorer 6 og 8, nesten 30 prosent av nettbrukere har nettlesere som enten ikke støtter denne grunnleggende CSS, eller har betydelige problemer viser det.

motstrid~~POS=TRUNC verdier

Man kan bruke både "bredde" og "max bredde" i samme element, så lenge som de bruker forskjellige verdier. For eksempel, hvis du vil at siden skal fylle 75 prosent av bredden på skjermen, men ikke gå noe større enn 1000 piksler, vil du uttrykke dette som:

element {

width: 75%;
max-width: 1000px; }

Hvis du definerer både "width" og "max-width" av piksler, er det alltid kommer til å starte på det maks bredde - gjøre bruk av elementet feilaktig og sløsing.

Explorer Problemer Internett

Internet Explorer er full av feil med hensyn til maks bredde eiendom. Internet Explorer 7 og tidligere hadde ingen støtte for "arve" value for "max-width", som forteller et element for å bruke den samme verdien som den overordnede element. I Internet Explorer 8, kan du bruke "arve" så lenge du setter en gyldig DOCTYPE for siden din. Mens Internet Explorer 8 støtter maks bredde i teorien, er maks bredde ignorert i Internet Explorer 8 når et element er fløt, blir overløp verdien satt til "bla" eller "auto", og den har en max-høyde satt. Ordnede objekter heller ikke skalere til riktig størrelse i IE8. Disse feilene var ikke til stede i Internet Explorer 7. Internet Explorer 6 og tidligere støtter ikke max-bredde i det hele tatt.

potensielle reparasjoner

For Internet Explorer 8 brukere, kan du oppnå bedre CSS2.1 og begrenset CSS3 støtte ved å fortelle dokument å kjøre med IE8 standarder. For å gjøre dette, setter denne meta tag rett under <head> -taggen i dokumentet:

Endring av denne meta tag lar deg endre hvordan Internet Explorer tolker siden din. For eksempel, hvis du vil at den skal vise siden din ved hjelp av Internet Explorer 7 standarder, ville du sette innhold til "IE = 7".

Tysk programmerer David Mueller utviklet en enkel reparasjon skript for nettlesere som ikke støtter maks bredde CSS. Denne koden er tilgjengelig på CSS triks hjemmeside som "Fix Min / Max-bredde for nettlesere uten Native støtte." Ved å innlemme dette, kan du bidra til å gjøre oppsettet mer funksjonelle i nettlesere som ikke støtter "max-width", men kanskje ikke så nyttig på nettlesere som har dårlig støtte for eiendommen.