Šiandienos žiniatinklio naršyklė nuėjo ilgą kelią nuo proto dienų, kai bet kokia tarpusavio naršyklės nuoseklumas buvo pageidaujamas mąstymas. Šiandienos interneto naršyklės yra labai suderinamos su standartais. Jie puikiai groja kartu ir pateikia gana nuoseklią puslapių peržiūrą įvairiose naršyklėse. Tai apima naujausias "Google Chrome", "Microsoft Edge", "Mozilla Firefox", "Opera", "Safari" ir įvairių naršyklių, rasti daugybę mobiliųjų įrenginių , naudojamų šiandien prieigai prie interneto.
Nors neabejotinai padaryta pažanga, kai kalbama apie interneto naršykles ir kaip jie rodo CSS, tarp šių skirtingų programinės įrangos parinkčių tebėra neatitikimų. Vienas iš bendrų nenuoseklumų yra tai, kaip šios naršyklės pagal numatytuosius nustatymus apskaičiuoja maržą, užpildą ir sieną.
Dėl šių aspektų dėžutės modelio poveikis yra visų HTML elementų, ir todėl, kad jie yra labai svarbūs kuriant puslapio išdėstymus, nenuoseklus rodymas reiškia, kad puslapis gali atrodyti puikiai vienoje naršyklėje, bet šiek tiek atrodo kitoje. Siekiant kovoti su šia problema, daugelis interneto dizainerių normalizuoja šiuos dėžutės modelio aspektus. Ši praktika taip pat žinoma kaip "nulinės vertės nustatymas" vertės, margin, ir sienos.
Pastaba apie numatytuosius nustatymus naršyklėje
Visi interneto naršyklės turi numatytuosius nustatymus tam tikriems puslapio aspektams. Pavyzdžiui, hipersaitus yra mėlynos spalvos ir pabrėžiamos pagal numatytuosius nustatymus. Tai yra nuosekli visose skirtingose naršyklėse, ir nors tai yra kažkas, kad dauguma dizainerių pasikeičia, kad atitiktų jų konkretaus projekto poreikius, tai, kad jie visi prasideda tais pačiais nustatymais, leidžia lengviau atlikti šiuos pakeitimus. Deja, numatytoji maržų, įklijavimo ir sienų vertė nėra tokia pati, kokia yra viena ar kita naršyklė.
Normalizuojančios vertės ir padangos
Geriausias būdas išspręsti nenuoseklios dėžutės modelio problemą yra nustatyti visas HTML elementų vertes ir įklijuoti į nulį. Yra keletas būdų, kuriuos galite tai padaryti, - pridėti šį CSS taisyklę į savo stilių lentelę:
* {margin: 0; padding: 0; }Ši CSS taisyklė naudoja * arba pakaitos simbolį. Šis simbolis reiškia "visi elementai" ir jis iš esmės parinks kiekvieną HTML elementą ir nustatys maržas ir įklijuotę į 0. Nors ši taisyklė yra labai nekonkretiška, nes ji yra jūsų išorinėje lentelėje stilių, ji turės didesnę specifiškumą nei numatytoji naršyklė vertybės daro. Kadangi šie numatyjai yra tai, ką jūs perrašote, šis vienas stilius atliks tai, ką jūs nustatote.
Kitas variantas - taikyti šias vertes HTML ir kūno elementams. Kadangi visi kiti jūsų puslapio elementai bus šių dviejų elementų vaikai, CSS kaskados turėtų taikyti šias reikšmes visiems kitiems elementams.
html, body {margin: 0; padding: 0; }Tai pradės savo dizainą toje pačioje vietoje visose naršyklėse, tačiau vienas dalykas, kurį reikia prisiminti, yra tas, kad kai tik įjungsite visas paraštes ir pamokas, turėsite tam tikroms svetainės dalims atsitiktine tvarka juos grąžinti, kad pasiektumėte išvaizdą ir manote, kad jūsų dizainas reikalauja.
Sienos
Jūs galite galvoti "bet ne naršyklės turi sieną aplink kūno elementą pagal nutylėjimą". Tai nėra griežtai tiesa. Senesnės "Internet Explorer" versijos yra skaidrios ar nematomos aplink elementus. Jei nenustatysite sienos iki 0, ši siena gali sugadinti jūsų puslapių išdėstymus. Jei nusprendėte, kad toliau palaikysite šias pasenusias IE versijas, turėsite tai spręsti pridėdami toliau nurodytus elementus prie savo kūno ir HTML stilių:
HTML, kūno {
marža: 0 px;
padding: 0px;
sienos: 0px;
}
Panašus į tai, kaip išjungėte maržas ir užpildą, šis naujas stilius taip pat išjungs numatytas ribas. Taip pat galite padaryti tą patį, naudodami anksčiau straipsnyje parodytą pakaitos žymeklio parinkiklį.
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 27/9/16.