Денешниот веб прелистувач е долг пат од лудите денови кога било каков вид на конзистентност на крстот-прелистувач беше желба за размислување. Денес, веб прелистувачите се многу компатибилни со стандардите. Тие играат убаво заедно и испорачуваат прилично конзистентен приказ на страници низ разните пребарувачи. Ова ги вклучува најновите верзии на Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari и различните пребарувачи пронајдени на безброј мобилни уреди што се користат за пристап до веб-сајтот денес.
Додека напредокот е сигурно направен кога станува збор за веб прелистувачи и како тие прикажуваат CSS, сеуште има недоследности помеѓу овие различни софтверски опции. Една од најчестите недоследности е како овие прелистувачи стандардно ги пресметуваат маргините, подлогите и границите.
Поради овие аспекти на кутијата модел ефект сите HTML елементи, и затоа што тие се од суштинско значење за создавање на изгледи на страница, неконзистентен приказ значи дека страницата може да изгледа одлично во еден прелистувач, но изгледа малку надвор во друга. За да се бори против овој проблем, многу веб-дизајнери ги нормализираат овие аспекти на кутијата. Оваа практика е исто така позната како "нулање" на вредностите за маргините, подлогите и границите.
Забелешка за преференци на прелистувачот
Сите веб прелистувачи имаат стандардни поставки за одредени аспекти на прикажување на една страница. На пример, хиперврските се сини и се подвлекуваат по дифолт. Ова е конзистентно во различни прелистувачи и иако тоа е нешто што повеќето дизајнери се менуваат за да одговараат на потребите за дизајнирање на нивниот специфичен проект, фактот дека сите тие започнуваат со истите стандардно, го олеснуваат овие промени. За жал, стандардната вредност за маргините, залихите и границите не ужива во исто ниво на конзистентност на крстот.
Нормализирање на вредностите за маргините и облогата
Најдобар начин да се реши проблемот со неконзистентен модел на кутија е да ги поставите сите маргини и додатоци на HTML елементи на нула. Постојат неколку начини на кои можете да го направите ова е да го додадете ова правило на CSS на вашиот стил лист:
* {маргина: 0; Соочи: 0; }Ова правило на CSS го користи знакот * или маска. Овој знак значи "сите елементи" и во основа ќе го одбере секој HTML елемент и ќе ги постави маргините и пропагирањата на 0. Иако ова правило е многу неспецифично, бидејќи е во вашата надворешна табела, ќе има поголема специфичност од стандардниот прелистувач вредности. Бидејќи тие стандардни се она што го пребришувате, овој стил ќе го постигне она што го поставувате.
Друга опција е да ги примениме овие вредности на HTML и елементите на телото. Бидејќи сите други елементи на вашата страница ќе бидат деца на овие два елементи, CSS каскадата треба да ги примени овие вредности на сите други елементи.
html, body {margin: 0; Соочи: 0; }Ова ќе го започне дизајнот на истото место на сите прелистувачи, но едно нешто да се запамети е тоа што кога еднаш ќе ги свртите сите маргини и пропаѓањето, ќе треба селективно да ги вклучите за одредени делови од вашата веб-страница за да го постигнете изгледот и чувствувам дека вашиот дизајн бара.
Граници
Можеби размислувате ", но ниеден прелистувач нема стандардна граница околу елементот на телото". Ова не е строго точно. Постарите верзии на Internet Explorer имаат транспарентна или невидлива граница околу елементите. Освен ако не ја поставите границата на 0, таа граница може да ги загрози видовите на страницата. Ако сте решиле дека ќе продолжите да ги поддржувате овие застарени верзии на IE, ќе треба да го адресирате ова со додавање на следново во вашето тело и HTML стилови:
HTML, тело {
маргина: 0px;
Соочувајќи се: 0px;
граница: 0px;
}
Слично на тоа како сте ги исклучиле маргините и додатоците, овој нов стил исто така ќе ги исклучи стандардните граници. Исто така, можете да го направите истото со користење на селектираниот знак, прикажан претходно во статијата.
Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар на 9/27/16.