2012-04-23 4 views
0

Firefoxで入力ボタンが正しく表示されず、値(テキスト)を適切な場所に表示する方法がわかりません。FirefoxのINPUT行のバグ?どんな仕事?

.rb { 
    width: 142px; 
    height:142px; 
    float:left; 
    background:#2F2F2F; 
    color:#FFF; 
    font-size:95%; 
    line-height:210px; 
    margin-top:15px; 
    border:0; 
    outline:none; 
    padding:0; 
    text-align:center 
} 

.rbSubmit { 
    background: url('http://www.41q.org/admin/img/sprite_icon.png') -568px -200px no-repeat; 
    color:#808080 
} 
<input id="rbSubmit" class="rb rbSubmit" type="submit" value="submit"> 
+1

"正しく表示されません"は、問題の説明ではありません。 – spender

+0

はい、あなたの期待している結果は何ですか?例えば「送信ボタンのアイコンを1行目、4列目のアイコンにする」 –

答えて

0

http://jsfiddle.net/qzYVP/1/

:あなたはこのようにそれを修正することができます。 IE8/9、FF、Chromeで動作します。相対的なフォントサイズと

.rb { 
    width: 142px; 

    /* tweak these to get the exact font size/position desired */ 
    height: 14px; 
    font-size: 14px; 
    line-height: 14px; 
    padding: 90px 0 38px 0; 

    float:left; 
    background:#2F2F2F; 
    color:#FFF; 
    margin-top:15px; 
    border:0; 
    outline:none; 
} 

例:私は最近、非常に同じ問題に遭遇したhttp://jsfiddle.net/qzYVP/2/

+0

ありがとうございました。これは完璧に機能しました。 – Erik

5

Firefoxのいくつかの余分なパディングを追加します。これは、フォントサイズに等しい高さ+パディング+行の高さを使用して、明示的なサイズに依存している

.rb::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 
1

は、正確に行の高さ(だけではなく、Firefoxで、またOperaブラウザで)に関するウェブ上の非常に良い説明を見つけました私はお尻内のテキストの行の高さを設定しようとしたとき、私は最近のFirefoxとOperaのバグに遭遇した

http://www.cssnewbie.com/input-button-line-height-bug/

on(入力 "submit"ボタンとHTMLボタンタグに影響を与えます)。不具合?行の高さは変更できません!

ボトムラインのアドバイスは、代わりにパディングを使用することです。

はまた、私はminitechのanwserは非常に有用見つけたので、私は二つの問題は、私はあまりにものFirefoxのバグの問題を持っていたあなたの質問

3

であると思います。 inputタイプの "submit"、 "reset"、 "button"の行の高さの設定は無視されます。

私はtwitterブートストラップのために必要なので、パディングの回避策は私のためには機能しませんでした。 Twitterのブートストラップでは、サイジングボタンにパディングを使用します。

だから私はこの回避策を見つけた:

//FireFox workaround, FF ignores line-height for input elements. 
input[type="button"], 
input[type="reset"], 
input[type="submit"] { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    line-height: 19px; 
    height: 19px; 
} 
0

のmin-heightプロパティも動作しますが、あなたはあなたを伸ばすことができるようにするフレキシボックス要素、内部の入力を使用していることはできません場合に有用であるかもしれません宣言された高さ。

関連する問題