Сёння вэб-браўзэр прарабіла доўгі шлях ад вар'ятаў дзён, дзе любы выгляд паслядоўнасці кроссбраузерной было выдаваць жаданае за сапраўднае. Сучасныя вэб-браўзэры ўсё вельмі адпавядае стандартам. Яны гуляюць добра разам і забяспечваюць досыць паслядоўнае адлюстраванне старонак па розных браўзэрах. Гэта ўключае ў сябе апошнія версіі Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari і розныя браўзэры , знойдзеныя на мірыяды мабільных прылад выкарыстоўваецца для доступу да вэб - сайт сёння.
Нягледзячы на прагрэс, безумоўна, было зроблена, калі гаворка ідзе пра вэб-браўзэрах і як яны адлюстроўваюць CSS, усё яшчэ ёсць разыходжанні паміж гэтымі рознымі варыянтамі праграмнага забеспячэння. Адным з найбольш распаўсюджаных неадпаведнасцяў, як гэтыя браўзэры разліку палёў, водступаў і межаў па змаўчанні.
З-за гэтых аспектаў акно мадэлі эфекту ўсё HTML-элементы, і таму, што яны гуляюць важную ролю ў стварэнні макетаў старонак, непаслядоўны дысплей азначае, што старонка можа выдатна глядзецца ў адным браўзэры, але выглядаюць трохі не ў іншым. Для барацьбы з гэтай праблемай, многія вэб-дызайнеры нарміравана гэтыя аспекты блокавай мадэлі. Гэтая практыка таксама вядомая як «абнуленне» значэння для палёў, водступаў і межаў.
Заўвага па змаўчанні ў браўзэрах
Вэб-браўзэры ўсё маюць значэнне па змаўчанні для некаторых аспектаў адлюстравання старонкі. Напрыклад, гіперспасылка сіні колеру і падкрэсліванне па змаўчанні. Гэта ўзгадняецца ў розных браўзэрах, і, хоць гэта тое, што большасць дызайнераў змяніць, каб задаволіць патрэбы дызайну свайго канкрэтнага праекта, той факт, што ўсе яны, пачынаючы з тым жа па змаўчанні робіць яго лягчэй зрабіць гэтыя змены. На жаль, значэнне па змаўчанні для палёў, водступаў і межаў не карыстаецца такім жа узроўнем ўзгодненасці кроса-браўзэра.
Нармалізацыя Значэнні Поля і водступы
Лепшы спосаб вырашыць праблему супярэчлівай блокавай мадэлі з'яўляецца ўсталяваць ўсе палі і значэння Перацяжка HTML элементаў да нуля. Ёсць некалькі спосабаў, якія вы маглі б зрабіць гэта, каб дадаць гэтае правіла CSS у табліцу стыляў:
* {Маржа: 0; абіўка: 0; }Гэтае правіла CSS выкарыстоўваецца * ці сімвал падстаноўкі. Гэты сімвал азначае «ўсе элементы», і гэта будзе ў асноўным выбраць кожны элемент HTML і ўсталяваць поля і водступы ў 0. Нават калі гэта правіла вельмі неспецифичны, таму што ў вашым знешнюю табліцу стыляў, ён будзе мець больш высокую спецыфічнасць, чым браўзэр па змаўчанні значэння робяць. Паколькі гэтыя значэнні па змаўчанні з'яўляецца тое, што вы перазапіс, гэта адзін стыль будзе зрабіць тое, што вы наладжваеце, каб зрабіць.
Іншы варыянт складаецца ва ўжыванні гэтых значэнняў у HTML і цела элементаў. Паколькі ўсе астатнія элементы на старонцы будуць дзецьмі з гэтых двух элементаў, то CSS каскад павінен прымяніць гэтыя значэнні для ўсіх гэтых іншых элементаў.
HTML, цела {поле: 0; абіўка: 0; }Гэта запусціць свой праект у тым жа месцы на ўсіх браўзэрах, але адна рэч, каб памятаць пра тое, што, як толькі вы уключыце ўсе палі і водступы прэч, вам трэба будзе выбарачна ўключыць іх назад для асобных частак вашай вэб-старонкі для дасягнення выгляд і адчуваць, што ваш праект патрабуе.
межы
Вы можаце думаць «але не браўзэры маюць межаў вакол элемента цела па змаўчанні». Гэта не зусім дакладна. Больш за старыя версіі Internet Explorer маюць празрыстую або нябачную мяжу вакол элементаў. Калі вы не ўсталюеце мяжы 0, што мяжа можа сапсаваць вашыя старонкі макетаў. Калі вы вырашылі, што вы будзеце працягваць падтрымліваць гэтыя старыя версіі IE, вам трэба будзе вырашыць гэтую праблему, дадаўшы наступны радок у вашым целе і HTML стылі:
HTML, цела {
Маржа: 0px;
абіўка: 0px;
мяжы: 0px;
}
Падобна таму, як вы выключылі поля і водступы, гэты новы стыль будзе таксама адключыць мяжы па змаўчанні. Вы таксама можаце зрабіць тое ж самае, выкарыстоўваючы селектар падстаноўныя, паказаны раней у гэтым артыкуле.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 9/27/16.