web-dev-qa-db-ja.com

Firefoxフィールドのブラウザ固有のCSSパディング

アプリケーションにドロップダウンリストがあり、それを中央に配置するために、Mozilla Firefoxの場合はpadding-top 10pxを追加する必要がありますが、google chromeの場合、パディングは必要ありません。リストを選択して、このブラウザー固有を設定します。

select {
  -moz-padding-top: 10px;
  -webkit-padding-top: 0px;
}

これを回避する方法についてのアイデアはありますか？ Fiddleの問題です。これをChromeで確認してからFirefoxでチェックすると、テキストが常に中央に来るようにしたいので、

http://jsfiddle.net/uHDa6/

cssfirefoxwebkit
15
Jay

あなたの質問への答えは：はい、Mozilla固有のCSSをスタイルシートに配置することが可能です。 （インラインスタイル属性にはありません。）
この場合、次のように書きます

@-moz-document url-prefix() {
    select {padding-top:10px;}
}

これは@documentルールのMozilla接頭辞バージョンであり、他のブラウザでは認識されません。

ただし、テキスト位置の不一致の問題に対する実際の解決策は、高さを設定せず、選択範囲のパディングのみを設定することです。ハックはありません。

style="font-size: 14px; padding: 11px 0 11px 5px;"

これは、すべてのブラウザで望ましい効果があります。 new fiddle を参照してください。

35
Mr Lister