Сценарий
Я использую элемент <button>
, который отображается как обычный текст с "+" на правом конце.
При щелчке элемент div расширяется и отображает некоторую информацию. Я думаю, что элемент кнопки является семантичным правильным для представления такой кнопки... button....
Проблема
Итак, я смешал некоторые кнопки и элементы h2, и у меня есть визуальная проблема. После сброса всех стилей пользовательского агента по умолчанию я ожидаю, что каждый элемент, который я представляю в документе, выглядит просто и неровно.
Но элемент кнопки выглядит не так просто. У этого есть текст, немного, отступ текста.
Пример
Во-первых, три элемента: <h2><button>text node</button></h2>
, а два сверху - это просто <h2>text node</h2>
CSS
* {
/*Reset every elements apperance*/
background: none repeat scroll 0 0 transparent;
border: medium none;
border-spacing: 0;
color: #26589F;
font-family: 'PT Sans Narrow',sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.42rem;
list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
Другой элемент CSS
Другие элементы используют background-image, text-transform: uppercase и это. В Firebug есть нет paddings, поля, текстовые отступы или другие "мягкие" или "жесткие" свойства, которые могут испортить вещи. Я играл с настройками дисплея, но он ничего не исправляет или не делает хуже.
Вопрос
Может ли кто-нибудь объяснить, почему даже после сброса стилей по умолчанию существует этот визуальный сбой в элементе <button>
?