7

内部にテキストがなく、フォント アイコンのみのボタンのスタイルを設定しようとしているときに、興味深い HTML ボタン タグの動作に遭遇しました。この問題は、ボタンにheight属性が指定されている場合にのみ発生します。

JSFiddle

<header>
    <button><!-- No text here --></button>
    <button>This button is pushed down</button>
</header>

button { height: 40px; }

最初は、最初のボタン内のフォント アイコンが奇妙なベースライン マジックを行ったことが原因であると確信していましたが、最小限の動作例からわかるように、ボタン内にコンテンツがまったくない場合でも動作が維持されます。

最初のボタンにコンテンツを追加することでこれを修正できますが、唯一のコンテンツは<span class="icon user"></span>フォント アイコンである であるため、実際にはフォントのベースラインに干渉し、ボタンを数ピクセルだけ離して配置します。これが、アイコンを完全に内側に配置することに決めた理由です。これにより、元のわずかな配置の問題が修正されますが、ボタンが空のように機能するため、この新しい問題が導入されます。

空のボタンによる配置の問題を回避するにはどうすればよいでしょうか?

注: 上記は webkit ブラウザーでのみ発生するようです。Firefox はテキスト付きのボタンを正しく配置しますが、空のボタンは押し上げます。

4

2 に答える 2

13

これは、デフォルトでベースラインに揃えられる要素であるbuttonためです。inline

W3Cから:

ボックスのベースラインを親ボックスのベースラインに合わせます。ボックスにベースラインがない場合は、マージンの下端を親のベースラインに合わせます。

それらを正しく配置するには、vertical-align: top; (またはmiddle、bottom値として) を使用します。

button { 
    height: 40px;
    margin-left: 5px; 
    vertical-align: top;
}

デモ

一方、幅ゼロのスペースエンティティを使用することもできます&#8203;-デモ

この動作はinlineandinline-block要素と共通です。上記のすべてを回避したい場合は、ここで使用できます。これにより、プロパティfloatが不要になり、インラインとブロック レベルが強制されます。vertical-alignfloatbutton

デモ (使用float: left;)

注: を使用する場合は、意味floatがわからない場合は、詳細を説明するclear私の回答を参照 してください。

于 2014-02-08T12:00:06.240 に答える