Dagens webbläsare har kommit långt ifrån de galna dagarna där någon form av tvärbrowser-konsistens var önsketänkande. Dagens webbläsare är alla mycket standardkompatibla. De spelar snyggt tillsammans och levererar en ganska konsekvent sidvisning över de olika webbläsarna. Detta inkluderar de senaste versionerna av Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari och de olika webbläsarna som finns på de många mobilenheter som används för att komma åt webbplatsen idag.
Även om framsteg verkligen har gjorts när det gäller webbläsare och hur de visar CSS, finns det fortfarande inkonsekvenser mellan dessa olika programalternativ. En av de vanliga inkonsekvenserna är hur dessa webbläsare som standard beräknar marginaler, vadderingar och gränser.
På grund av dessa aspekter av boxmodellseffekten är alla HTML-element, och eftersom de är nödvändiga för att skapa sidlayouter, innebär en inkonsekvent visning att en sida kan se bra ut i en webbläsare, men se lite av i en annan. För att bekämpa detta problem normaliserar många webbdesigners dessa aspekter av boxmodellen. Denna praxis kallas också "nollställning" av värdena för marginaler, vadderingar och gränser.
En anteckning om webbläsarens standardinställningar
Webbläsare har alla standardinställningar för vissa visningsaspekter på en sida. Till exempel är hyperlänkar blåa och understryks som standard. Detta överensstämmer över olika webbläsare, och även om det är något som de flesta designers ändras för att passa designbehoven hos deras specifika projekt, gör det faktum att de alla börjar med samma standardinställningar det lättare att göra dessa ändringar. Tyvärr kan inte standardvärdet för marginaler, vadderingar och gränser ha samma nivå för cross-browser-konsistens.
Normalisering av värden för margen och vaddering
Det bästa sättet att lösa problemet med inkonsekvent boxmodell är att ställa in alla marginaler och vadderingsvärden för HTML-element till noll. Det finns några sätt att du kan göra detta är att lägga till den här CSS-regeln i ditt stilark:
Denna CSS-regel använder * eller jokertecken. Den karaktären betyder "alla element" och det skulle i grunden välja varje HTML-element och ställa in marginalerna och vaddering på 0. Även om denna regel är mycket ospecifik, eftersom den finns i ditt externa formatark, kommer det att ha en högre specificitet än standardwebbläsaren värden gör. Eftersom dessa standardvärden är vad du skriver över, kommer den här stilen att göra vad du vill göra.
Ett annat alternativ är att tillämpa dessa värden på HTML- och kroppselementen. Eftersom alla andra element på din sida kommer att vara barn av dessa två element, bör CSS-kaskaden tillämpa dessa värden på alla andra element.
Detta kommer att starta din design på samma plats på alla webbläsare, men en sak att komma ihåg är att när du vrider alla marginaler och vadderar du måste du selektivt slå dem på igen för specifika delar av din webbsida för att uppnå utseendet och känner att din design kräver.
Gränser
Du kanske tänker "men ingen webbläsare har en gräns runt kroppsdelen som standard". Detta är inte strikt sant. Äldre versioner av Internet Explorer har en genomskinlig eller osynlig gräns runt element. Om du inte anger gränsen till 0, kan den gränsen röra upp dina sidlayouter. Om du har bestämt att du kommer att fortsätta att stödja dessa föråldrade versioner av IE, måste du ta itu med detta genom att lägga till följande i din kropp och HTML-format:
HTML, kropp {marginal: 0px;vaddering: 0px; gränsen: 0px;} På samma sätt som du stängde av marginalerna och vadderingen, kommer den här nya stilen också att stänga av standardgränserna. Du kan också göra samma sak med hjälp av vildkortsväljaren som visas tidigare i artikeln. Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 9/27/16.
