9

ボタンとアンカーのこのコードサンプルを確認してください：http：//jsbin.com/ecitex/2/edit

私はそれらをすべてのブラウザで同一にしようとしています。ただし、違いは残っており、ブラウザごとに違いがあります（Chrome、Safari、Firefox、IE8を試してみました）。

どのCSS正規化が欠落していますか？

更新： 提案ごと：

  • 追加しましたline-height: 50px（ユーザーエージェント（Chrome）の要素のデフォルトはですがline-height、それでもテキストを垂直方向に中央揃えにします–どうやって？！）buttonnormal
  • cursor: pointerマウスカーソルを正規化するために追加しました。

http://jsbin.com/ecitex/11/edit

では、Firefoxで結果を確認してください。ボタンのパディングに注目してください。次に、IE8の結果を確認します。おっと、2つが完全に完全に異なっていることに注意してください。

アップデート2：

IEの問題は既知であり、解決できないようです：http ://www.quirksmode.org/css/tests/mozie_button2.html

Firefoxのパディングには何も見つかりませんでした。（quirksmodeの記事では、Mozillaの問題について言及していますが、それは別の問題です。）

アップデート3：

素晴らしい、Firefoxの問題を修正しました：http：//jsbin.com/ecitex/15/edit

さて、これまでのところ、すべての回答がソリューションの一部を提供しているため、実際には1つの最良の回答はありません。私は次のいずれかの人に最良の答えを与えます：

  • line-height: 50pxが垂直方向に中央揃えのテキストであるaのに対し、buttonは垂直方向に中央揃えのテキストを指定する必要がある理由を説明しますline-height: normal。
  • IEの問題の解決策を提供します。
4

3 に答える 3

9

次を使用して、Firefoxで余分なパディングを削除できます。

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

これは、行の高さについてのEric Meyerからの良い説明です。これは、50pxとして明示的に設定する必要がある理由をうまく説明しています：http：//meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/。

IEのフォントサイズの問題を修正する新しいCSSを次に示します。

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0px;
  height: 50px;
  border-width: 0;
  background-color: Red;
  color: White;
  font-family: sans-serif;
  font-weight: normal;
  font-size: inherit;
  text-decoration: none;
  line-height: 50px;
  cursor: pointer;
  font-size: 100%;
}
button {
  #width:0px;
  overflow: visible;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
于 2012-11-14T16:55:59.543 に答える
4

line-heightプロパティを使用して、アンカータグのテキストを垂直方向の中央に配置する必要があります

デモ

CSS

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0;
  height: 50px;
  border-width: 0;
  background-color: Red;
  color: White;
  font-family: sans-serif;
  font-weight: normal;
  font-size: inherit;
  text-decoration: none;
  line-height: 50px; <-------- Here
}
于 2012-11-12T16:22:59.423 に答える
2

マウスがホバーしているときにポインタを追加するために属性cursor:pointer;を追加します（入力に常にポインタがあるとは限りません）

そして最後 line-height:46px;に垂直方向の整列に使用

完全なコードはここにあります-> http://jsbin.com/ecitex/10/edit

于 2012-11-12T16:31:18.410 に答える