0

私のすべてのボタンで、Firefox でのパディングの動作が異なります。調査の結果、これは FF のデフォルトのスタイルシートにいくつかの奇妙な設定があるためだとわかっていますが、スタイルシートに一般的な修正を追加しました。パディングが大きすぎるため、Firefoxのツールバーに1つのボタンが収まらないことを除けば、それで問題ありません。

ここでJsfiddle 。

通常の修正;

input[type=button]::-moz-focus-inner{padding:0; border:0;}

いくつかの要素が削除されたボタンの css。

.buttonBlue {background-color:#008abd; border-radius:0.2em; 
             font-family:inherit; 
             color:white; border: 1px solid black;
             cursor:pointer; 


             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#008abd', endColorstr='#036b91');
             background: -webkit-gradient(linear, left top, left bottom, from(#008abd), to(#036b91));
             background: -moz-linear-gradient(top,  #008abd,  #036b91);


    }
4

2 に答える 2

0

要素の Appearance 属性を none に設定すると、行儀の良いブラウザーはすべてその GUI フレーバーを削除します。
https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

ボタンの場合、外観のデフォルト値は「ボタン」です​​。明示的に「なし」に設定すると、奇妙なパディングを含む、ブラウザーの組み込みのプラットフォーム固有のスタイルがオーバーライドされます。

この属性に反応するブラウザは Firefox だけではありません。Safari と Chrome は -webkit-appearance バリエーションをリッスンし、Opera は -o-appearance バリエーションをリッスンします。MSIE9 または 10 についてはわかりません。

于 2012-08-14T21:37:40.173 に答える
0

cssプレフィックスでmozをターゲットにすることで修正を見つけました。理想的ではありませんが、うまくいきました。ボタンについて心配するのではなく、他のことに取り掛かる必要があります。とにかくここにあります。

@-moz-document url-prefix(){
                           .buttonBlue 
                             { padding:0px 7px 0px 4px !important;} 
                            }
于 2012-08-14T22:25:14.830 に答える