У каждого HTML элемента существует множество атрибутов. Это цвет, расстояние до соседних элементов, выравнивание, бордюр и т.д. Когда, при верстке, задаются правила CSS, верстальщик обычно задает значения только тех атрибутов, которые необходимы для представления данного элемента на странице. Что делает браузер со значениями неуказанных атрибутов? В этом случае браузер использует значения атрибутов по умолчанию. И вот тут кроется опасность. Значения атрибутов по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к некорректному отображению страницы в разных браузерах.
Как решается эта проблема? Во-первых, необходимо проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, в css файле необходимо задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости устанавливать значения свойств HTML элементов в соответствии со своими установками по умолчанию. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color : white;
}
Или так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 1px;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
}
blockquote, q {
quotes: '' '';
}
Ну, или можно придумать что нибудь еще...
Таким образом, все элементы на странице будут иметь свойства, заданные в данном коде. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.
