入力タイプ= Firefoxでテキスト提出を提出する

Question

フォームボタンのスタイルを設定しようとしていますが、Firefoxの問題が発生しました...

私はしたい特定の<a />と<input type="submit" />と同じように見える（私は、ホバー効果を適用するためにスライドドア技術を使用して、ボタンの背景画像を持っています）。

これはすべてFirefoxの場合を除いて素晴らしい作品です。それよりもやや低い。 IEとSafari/Chromeは正常に動作します。

alt text http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png

誰もが任意のアイデアを得ましたか。 、パディング（上下）：

おかげ

<div class="buttons"> 
    <a href="#" class="button btn-small-grey">&laquo Back</a> 
    <input type="submit" class="button btn-large-green" value="Save changes" /> 
</div> 

.button 
{ 
    cursor: pointer; 
    border: 0; 
    background-color: #fff; 
    color: #fff; 
    font-size: 1.4em; 
    font-weight: bold; 
    outline: 0; 
    font-family: Arial, Verdana, Sans-Serif; 
} 

a.button 
{ 
    display: block; 
    float: left; 
    text-align: center; 
    text-decoration: none; 
    padding: 5px 0 0 0; 
    height: 22px; 
    margin-right: 1em; 
} 

.btn-small-grey 
{ 
    height: 27px; 
    width: 96px; 
    background-position: 0 -81px; 
    background-image: url(/assets/images/buttons/buttons-small.gif); 
} 

.btn-large-green 
{ 
    height: 27px; 
    width: 175px; 
    background-position: 0px -54px; 
    background-image: url(/assets/images/buttons/buttons-large.gif); 
} 

Answer 1

私はこの問題を数ヶ月前に解決したので、私はこの問題に直面しました。ニース。私のCSS上でポーリングした後、私は最終的に "修正"を見つけました。私はどこかのウェブ上でそれを見つけたので、私は信用を取ることはできませんが、うまくいけば、それは私のためにあったように、それはあなたのように有用であろう：

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

私はこのことができます願っています。

Answer 2

私は同じ問題を抱えていたと私は幅ではなく高さを固定した値で遊んで（のみFFとSafariのために）解決しました必要に応じて縦線を中央に設定します。ただし、ピクセル単位ですべての値（フォントサイズさえ）を設定した方が簡単です。

---

EDIT：私は問題はブラウザのテキストレンダリングによるものであるため、クロスブラウザのソリューションが、そこではないと思われます。この問題を完全に解決するには、テキスト付きの背景画像を描き、その画像をリンクまたはボタンに適用することができます。 このソリューションを使用しても、アクセシビリティが失われます。

また、条件付きCSS文を使用して、各ブラウザのレイアウトを改善できます。

Answer 3

私はフォームボタンをスタイルする必要があるたびに同じ問題があります。申し訳ありません、現時点ではかなり忙しいので、私は通常どのようにそれを修正簡単な説明のみ。

FFでは、テキストは通常​​、あなたが付けたイメージとちょうど同じで、ちょうどボタン自体に「パディングボトム」を適用します。これは、ピクセル数のボタン数のテキストを上に移動します。

IEでテキストを移動して、IEが少し外に見えてしまうという問題があります。これを解決するために、ボタンの高さとまったく同じ値で同じボタンに "線高さ"を適用します。これにより、IEはパディングを完全に無視し、テキストを真ん中に配置します。以下のサンプルHTMLコードです：私はあなたのコードに直接適用されませんでしたが、私は現時点では少し忙しい、あなたのアイデアを持って期待し

.search 
{ 
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */ 
    height: 29px; 
    width: 104px; 
    border: 0; 

    /* centering text on button */ 
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */ 
    padding-bottom: 2px; /* IE will ignore but works for FF */ 
} 

申し訳

：

<input type="submit" value="SEARCH" class="search"/> 

とCSSしかしそれは助ける。

ps。ちょうどIE8でチェックされ、上記のすべてのテキストは数ピクセルアップします。それで、それはもっと多くのことを意味します（無限？）パディングトップ/ボトムで嘲笑します。私は今、私の忍耐を失ってしまいました。そして、私はこれを別のスタイルシートに入れていると思います。このすべてのために

Answer 4

また、ボタンを別の要素で置き換えることもできます。アンカー要素は完全に機能します。それに 'submit'関数を追加するだけで、あなたはうまくいくでしょう。私はこれがより良い（そしてより単純な）クロスブラウザソリューションだと思います。

Answer 5

入力は、別のブラウザでW3ボックスモデルの慣習に従っていないフォーマットされている、あなたは含めることができます：

input /*Content follows box model*/ 
{ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

    height:24px; 
} 

また（シェリーが指摘）Firefox用が含ま：

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

そうでない場合あなたはボタンを使用することができました

私はこれらのすべてのソリューションをさまざまなソースから集めました。彼らはクレジットを受け取ります