Как reset все стили по умолчанию элемента кнопки HTML5 - программирование
Подтвердить что ты не робот

Как reset все стили по умолчанию элемента кнопки HTML5

Сценарий

Я использую элемент <button>, который отображается как обычный текст с "+" на правом конце.
При щелчке элемент div расширяется и отображает некоторую информацию. Я думаю, что элемент кнопки является семантичным правильным для представления такой кнопки... button....

Проблема

Итак, я смешал некоторые кнопки и элементы h2, и у меня есть визуальная проблема. После сброса всех стилей пользовательского агента по умолчанию я ожидаю, что каждый элемент, который я представляю в документе, выглядит просто и неровно.

Но элемент кнопки выглядит не так просто. У этого есть текст, немного, отступ текста.

Пример

First, three elements are <h2><button>TEXT</button></h2> and the two from above are just <h2>TEXT</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>?

4b9b3361

Ответ 1

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

добавьте это также в css, он решит вашу проблему.