Vefur flettitæki í dag hefur komið langt frá brjálaðurum dögum þar sem hvers konar samsvörun í vafra var ósköp. Vefur flettitæki í dag eru öll mjög staðlaðar. Þeir spila fallega saman og bera nokkuð samkvæman síðuskjá yfir ýmsa vafra. Þetta felur í sér nýjustu útgáfur af Google Chrome, Microsoft Edge, Mozilla Firefox, Óperu, Safari og ýmsar vélar sem finnast á mýgrútur farsíma sem notuð eru til að fá aðgang að vefsíðu í dag.
Þó að örugglega hafi verið gerðar framfarir varðandi vafra og hvernig þeir sýna CSS, þá eru enn ósamræmi milli þessara ýmissa hugbúnaðarvalkosta. Ein af algengustu ósamræmi er hvernig þessar vélar reikna út margar, padding og landamæri sjálfgefið.
Vegna þessara þátta í rammaglugganum eru öll HTML-þættir og vegna þess að þau eru nauðsynleg til að búa til síðuuppsetning, þýðir ósamræmi birting að blaðsíðni getur litið vel út í einum vafra, en líta aðeins svolítið út í öðru. Til að koma í veg fyrir þetta vandamál, normalize margir vefhönnuðir þessa þætti kassalíkansins. Þessi æfing er einnig þekkt sem "zeroing out" gildi fyrir marmar, padding og landamæri.
A athugasemd um Valkostir vafra
Vafrar hafa allir sjálfgefnar stillingar fyrir tiltekna skjáþætti á síðu. Til dæmis eru tengla blár og undirstrikuð sjálfgefið. Þetta er í samræmi við mismunandi vafra og þótt það sé eitthvað sem flestir hönnuðir breytast til að henta hönnunarkröfum sértækra verkefna, þá er sú staðreynd að þeir eru allir að byrja með sömu vanskilum auðveldara að gera þessar breytingar. Því miður, sjálfgefið gildi margra, padding og landamæra njóta ekki sama stigs samkvæmni vafrans.
Aðlögunarmörk fyrir margar og fóðrun
Besta leiðin til að leysa vandamálið með ósamræmi kassa líkanið er að stilla alla jaðar og púða gildi HTML-þætti í núll. Það eru nokkrar leiðir sem þú gætir gert þetta er að bæta þessum CSS reglu við stílblað þitt:
* {framlegð: 0; padding: 0; }Þessi CSS regla notar * eða wildcard staf. Þessi stafur þýðir "alla þætti" og það myndi í grundvallaratriðum velja hvert HTML atriði og stilla margar og padding til 0. Jafnvel þrátt fyrir að þessi regla sé mjög ótilgreind vegna þess að hún er í ytri stíll þínu, þá mun það hafa meiri sérstöðu en sjálfgefið vafra gildi gera. Þar sem þessar vangaveltur eru það sem þú ert að skrifa yfir, mun þessi stíll ná því sem þú ert að gera að gera.
Annar kostur er að beita þessum gildum á HTML og líkamsþætti. Vegna þess að allar aðrar þættir á síðunni þinni munu vera börn þessara tveggja þátta, ætti CSS Cascade að beita þessum gildum til allra annarra þátta.
html, líkami {framlegð: 0; padding: 0; }Þetta mun byrja hönnunina á sama stað á öllum vöfrum, en eitt sem þarf að muna er að þegar þú ert að snúa öllum múgum og padding burt, þá þarftu að velja þau aftur til ákveðins hluta af vefsíðunni þinni til að ná útliti og finnst að hönnunin þín kallar á.
Borders
Þú gætir hugsað "en engar vafrar hafa landamæri um líkamshlutann sjálfgefið". Þetta er ekki strangt satt. Eldri útgáfur af Internet Explorer hafa gagnsæ eða ósýnilega landamæri kringum þætti. Nema þú setur landamerkið í 0, þá getur þessi landamæri rakið upp síðuna þína. Ef þú hefur ákveðið að þú munir halda áfram að styðja þessar forðaðar útgáfur af IE, þá þarftu að takast á við þetta með því að bæta eftirfarandi við líkama þinn og HTML stíl:
HTML, líkami {
framlegð: 0px;
padding: 0px;
landamærin: 0px;
}
Líkur á því hvernig þú slökktir á jaðri og púði mun þessi nýja stíl einnig slökkva á sjálfgefinum landamærum. Þú gætir líka gert það sama með því að nota Wildcard selector sýnt fyrr í greininni.
Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 9/27/16.