Dagens nettleser har kommet langt fra de vanvittige dagene hvor noen form for kryssbrowser-konsistens var ønskelig tenkning. Dagens nettlesere er alle veldig standardkompatible. De spiller pent sammen og leverer en ganske konsistent sidevisning over de ulike nettleserne. Dette inkluderer de nyeste versjonene av Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari og de forskjellige nettleserne som finnes på de mange mobiltelefonene som brukes til å få tilgang til nettstedet i dag.
Selv om det fremdeles er gjort fremskritt når det gjelder nettlesere og hvordan de viser CSS, er det fortsatt uoverensstemmelser mellom disse ulike programvarealternativer. En av de vanlige inkonsekvensene er hvordan nettleserne beregner marginer, polstring og grenser som standard.
På grunn av disse aspektene av boksemodellvirkningen er alle HTML-elementer, og fordi de er avgjørende for å lage sidelayouter, en inkonsekvent visning betyr at en side kan se bra ut i en nettleser, men se litt ut i en annen. For å bekjempe dette problemet, normaliserer mange webdesignere disse aspektene av boksemodellen. Denne praksisen kalles også "nullstilling" verdiene for marginer, polstring og grenser.
En notat på nettleserinnstillinger
Nettlesere har alle standardinnstillinger for visse visningsaspekter på en side. For eksempel er hyperkoblinger blå og understreket som standard. Dette er konsekvent på tvers av ulike nettlesere, og selv om det er noe som de fleste designere endrer for å passe designbehovene til deres spesifikke prosjekt, gjør det lettere å gjøre disse endringene ved at de alle starter med de samme standardene. Dessverre har standardverdien for marginer, polstring og grenser ikke det samme nivået av kryssbrowser-konsistens.
Normalisering av verdier for marginer og polstring
Den beste måten å løse problemet med inkonsekvent boksemodell er å sette alle margene og utfyllingsverdiene til HTML-elementer til null. Det er noen måter du kan gjøre dette på, for å legge til denne CSS-regelen i stilarket ditt:
Denne CSS-regelen bruker * eller jokertegn. Det tegnet betyr "alle elementer", og det ville i utgangspunktet velge hvert HTML-element og sette margene og polstring til 0. Selv om denne regelen er svært uspesifisert, fordi den er i ditt eksterne stilark, vil det ha en høyere spesifisitet enn standard nettleseren verdiene gjør. Siden disse standardene er hva du overskriver, vil denne ene stilen oppnå det du skal gjøre.
Et annet alternativ er å bruke disse verdiene til HTML- og kroppselementene. Fordi alle de andre elementene på siden din skal være barn av disse to elementene, bør CSS-kaskaden bruke disse verdiene til alle de andre elementene.
Dette vil starte utformingen på samme sted på alle nettlesere, men en ting å huske er at når du slår alle marginer og polstring, må du selektivt slå dem på igjen for bestemte deler av nettsiden din for å oppnå utseendet. og føler at designet krever.
Borders
Du kan tenke "men ingen nettlesere har en grense rundt kroppsdelen som standard". Dette er ikke strengt sant. Eldre versjoner av Internet Explorer har en gjennomsiktig eller usynlig kantlinje rundt elementene. Med mindre du setter grensen til 0, kan den grensen opprette sidelayoutene dine. Hvis du har bestemt deg for at du vil fortsette å støtte disse antikke versjoner av IE, må du adressere dette ved å legge til følgende i din kropp og HTML-stiler:
HTML, kropp {margin: 0px;polstring: 0px; grense: 0px;} I likhet med hvordan du slått av margene og polstring, vil denne nye stilen også slå av standardgrenser. Du kan også gjøre det samme ved å bruke wildcardvelgeren vist tidligere i artikkelen. Opprinnelig artikkel av Jennifer Krynin. Redigert av Jeremy Girard på 9/27/16.
