web-dev-qa-db-ja.com

HTML5ボタン要素のすべてのデフォルトスタイルをリセットする方法

シナリオ

右端に「+」が付いたプレーンテキストとして表示される<button>要素を使用します。
クリックすると、div要素が展開され、いくつかの情報が表示されます。ボタン要素は、そのような...ボタン...トリガーを表すのに意味論的に正しいと思います。

問題

だから私はいくつかのボタンとh2要素を混合し、視覚的な問題を抱えています。すべてをリセットした後デフォルトのユーザーエージェントスタイル私がドキュメントに導入するすべての要素は、プレーンでスタイル付けされていないように見えます。

しかし、ボタン要素はそれほど明白に見えません。テキスト、わずかにテキストのインデントがあります。

例

First, three elements are <h2><button>TEXT</button></h2> and the two from above are just <h2>TEXT</h2>

まず、3つの要素は<h2><button>text node</button></h2>で、上から2つは<h2>text node</h2>です。

CSS

* {
        /*Reset's 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にはno paddings、margins、text-indents、または混乱を招く可能性のあるその他の「ソフト」または「ハード」プロパティがあります。ディスプレイの設定をいじってみましたが、何も「修正」されず、悪化することもありません。

質問

デフォルトのスタイルをリセットした後でも、<button>要素にこの視覚的な障害がある理由を誰かが説明できますか？

csshtmlbuttondefaultuser-agent
20
Tomkay
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

これもCSSに追加すると、問題が解決します。

21
Manish Sharma