Dagens webbrowser er kommet langt fra de vanvittige dage, hvor enhver form for cross-browser konsistens var ønsketænkning. Dagens browsere er alle meget standard-kompatible. De spiller pænt sammen og leverer en forholdsvis ensartet sidevisning på tværs af de forskellige browsere. Dette omfatter de nyeste versioner af Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari og de forskellige browsere, der findes på de utallige mobilenheder, der bruges til at få adgang til hjemmesiden i dag.
Selvom der er sket fremskridt, når det kommer til webbrowsere, og hvordan de viser CSS, er der stadig uoverensstemmelser mellem disse forskellige softwareindstillinger. En af de almindelige uoverensstemmelser er, hvordan disse browsere som standard beregner margener, polstring og grænser.
På grund af disse aspekter af boxmodel-effekten er alle HTML-elementer, og fordi de er væsentlige for at oprette sidelayouter, betyder en inkonsekvent visning, at en side kan se godt ud i en browser, men se lidt ud i en anden. For at bekæmpe dette problem normaliserer mange webdesignere disse aspekter af boxmodellen. Denne praksis er også kendt som "nulstilling" af værdierne for margener, polstring og grænser.
En note på browserens standardindstillinger
Webbrowsere har alle standardindstillinger for bestemte visningsaspekter af en side. For eksempel er hyperlinks blå og understreget som standard. Dette er konsistent på tværs af forskellige browsere, og selv om det er noget, som de fleste designere ændrer for at passe til designbehovene i deres specifikke projekt, er det lettere at foretage disse ændringer, fordi de alle starter med de samme standardindstillinger. Desværre har standardværdien for margener, polstring og grænser ikke det samme niveau for tværbrowserens konsistens.
Normalisering af værdier for margener og polstring
Den bedste måde at løse problemet med inkonsekvente boksemodel er at indstille alle marginer og polstring af HTML-elementer til nul. Der er et par måder, du kan gøre, er at tilføje denne CSS-regel til dit stylesheet:
Denne CSS-regel bruger * eller jokertegn. Denne karakter betyder "alle elementer", og det ville i grund og grund vælge hvert HTML-element og sætte margenerne og polstring til 0. Selvom denne regel er meget uspecifik, fordi den er i dit eksterne stilark, vil det have en højere specificitet end standardwebbrowseren værdier gør. Da disse standardindstillinger er, hvad du overskriver, vil denne ene stil udføre, hvad du har til hensigt at gøre.
En anden mulighed er at anvende disse værdier til HTML- og kropselementerne. Fordi alle de andre elementer på din side vil være børn af disse to elementer, skal CSS-kaskade anvende disse værdier for alle de andre elementer.
Dette vil starte dit design på samme sted på alle browsere, men en ting at huske er, at når du drejer alle margener og polstring, skal du selektivt slå dem på igen for bestemte dele af din webside for at opnå udseendet og føler, at dit design kræver.
Grænser
Du tænker muligvis "men ingen browsere har som standard en ramme omkring kroppens element". Dette er ikke strengt sandt. Ældre versioner af Internet Explorer har en gennemsigtig eller usynlig grænse omkring elementer. Medmindre du sætter grænsen til 0, kan den grænse ødelægge dine sidelayouter. Hvis du har besluttet, at du vil fortsætte med at understøtte disse forældede versioner af IE, skal du adressere dette ved at tilføje følgende til din krop og HTML-stil:
HTML, krop {margin: 0px;polstring: 0px; grænse: 0px;} På samme måde som du slået fra margenerne og polstring, vil denne nye stil også slukke for standardgrænser. Du kan også gøre det samme ved at bruge wildcard selectoren vist tidligere i artiklen. Originalartikel af Jennifer Krynin. Redigeret af Jeremy Girard den 9/27/16.
