A mai böngésző messzire jutott az őrült napoktól, ahol mindenféle böngésző-konzisztencia kívánatos volt. A mai web böngészők mind nagyon szabványosak. Jól együtt játszanak, és meglehetősen konzisztens oldalkijelzőt biztosítanak a különböző böngészők között. Ez magában foglalja a Google Chrome, a Microsoft Edge, a Mozilla Firefox, az Opera, a Safari és a különböző böngészők legfrissebb verzióit, amelyek a mobileszközök számos olyan webhelyén találhatók, amelyek a weboldal eléréséhez használatosak.
Bár a webes böngészőkre és a CSS megjelenítésére valóban biztosan előrelépés történt, még mindig vannak következetlenségek a különböző szoftver opciók között. Az egyik gyakori ellentmondás az, hogy ezek a böngészők alapértelmezés szerint kiszámolják a margókat, a kitöltést és a határokat.
Mivel a dobozmodell ezen aspektusai hatással vannak minden HTML-elemre, és mivel elengedhetetlenek az oldalelrendezések létrehozásában, egy inkonzisztens megjelenítés azt jelenti, hogy egy oldal nagyszerűen néz ki egy böngészőben, de kissé lefelé néz ki egy másikban. Ennek a problémának a leküzdése érdekében sok webes tervező normalizálja a doboz modell ezen aspektusait. Ezt a gyakorlatot úgy is ismeri, hogy "kihagyja" a margókat, a kitöltést és a határokat.
Megjegyzés a böngésző alapértelmezéseiről
A webböngészők mindegyike alapértelmezett beállításokat tartalmaz az oldal egyes megjelenítési szempontjaihoz. Például a hiperhivatkozások kék színűek és aláhúzottak. Ez a különböző böngészők között konzisztens, és bár ez a legtöbb tervező változik, hogy megfeleljen az adott projekt tervezési igényeinek, az a tény, hogy ugyanazok az alapértelmezések kezdődnek, egyszerűbbé teszik ezeket a változtatásokat. Sajnos a margók, a kitöltés és a szegélyek alapértelmezett értéke nem élvezi ugyanazt a szintet, mint a böngésző konzisztenciáját.
A margók és a párnázás értékeinek normalizálása
A következetlen dobozmodell problémájának megoldására a legjobb megoldás, ha a HTML elemek összes margóját és kitöltési értékét nullára állítja be. Van néhány módja annak, hogy ezt a CSS szabályt hozzáadja a stíluslaphoz:
* {margin: 0; párnázottság: 0; }Ez a CSS-szabály a * vagy a helyettesítő karaktert használja. Ez a karakter "minden elemet" jelent, és alapvetően kiválaszthatja minden HTML-elemet, és a margókat és a kitöltést 0-ra állítja. Bár ez a szabály nagyon nem specifikus, mert a külső stíluslapján nagyobb az egyedi jellemző, mint az alapértelmezett böngésző értékek nem. Mivel ezek az alapértelmezések az, amit felülírsz, ez az egyik stílus elvégzi azt, amire beállít.
Egy másik lehetőség az, hogy ezeket az értékeket a HTML és a testelemekhez alkalmazzák. Mivel az oldal összes többi eleme ennek a két elemnek a gyermekei, a CSS-kaszkádnak ezeket az értékeket kell alkalmazni minden más elemre.
html, body {margin: 0; párnázottság: 0; }Ezzel minden böngészőn ugyanazon a helyszínen indul el a terved, de egy dolog, amire emlékezni kell, hogy ha egyszer befordítja az összes margót és a paddinget, akkor szelektív módon vissza kell kapcsolnia őket a weboldal egyes részeihez, hogy elérje a megjelenést és úgy érzi, hogy a formatervezését kéri.
határok
Lehet, hogy gondolkodik ", de a böngészőknek nincs testük a testelem körül". Ez nem feltétlenül igaz. Az Internet Explorer korábbi verziói átlátszó vagy láthatatlan szegélyt tartalmaznak az elemek körül. Hacsak nem állította be a határt 0-ra, akkor a határ elronthatja az oldal elrendezését. Ha úgy döntött, hogy továbbra is támogatja az elavult IE verziókat, akkor hozzá kell rendelnie hozzá a test és a HTML stílusok hozzáadásával:
HTML, test {
margin: 0px;
párnázottság: 0px;
határ: 0px;
}
A margók és a párnázás kikapcsolásához hasonlóan ez az új stílus kikapcsolja az alapértelmezett határokat is. Ugyanezt is teheted a cikkben korábban bemutatott helyettesítő választó használatával.
Jennifer Krynin eredeti cikke. Szerkesztette: Jeremy Girard 9/27/16.