2011-02-25 14 views
12

<button>をFirefoxとChromeで一貫して表示するにはどうすればよいですか? 非対応の CSSソリューションはありますか?今、FirefoxのボタンがYUI's CSS Resetが、私はそれが同じ外観を得るために、クロムは二重の詰め物を持っている必要が発見されたパディングFirefoxのボタンに埋め込みがありません。Chromeのボタンが表示されません

HTML button

0をしたにも関わらず、余分なパディングを持っています。

  #fileActions button { 
       padding: 0.2em; 
      } 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
      #fileActions button { 
       padding: 0.4em; 
      } 
} 

クローム

Chrome computed style

Firefoxの

firefox computed style

+1

Firefoxのボタンからすべてのパディングを削除することもできませんでした。私が走っていることの一例がここにあります:http://jsfiddle.net/Z2BMK/。 IE8、Chromeは正常に動作します。 Firefoxは不思議なパディングを追加します。私はボタンの代わりにタグを使用しますが、タグをドラッグする方法や、フォーカスされているときにタグが自動的にスペースバーに表示されないようにする方法が嫌いです。 –

+0

[Firefoxの余分なボタン間隔/パディングを削除する]の複製が可能です。(http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox) – Dan

答えて

4

Firefoxは、内部フォーカスと呼ばれるボタンを提供します。これにより、点線のフォーカスラインを描画できます。 forms.cssには規則があり、1pxの境界線と2pxの左右のパディングがあります。これをWebページから上書きすることが可能かどうかはわかりません。

+1

です。唯一の欠点は、焦点を当てたときに点線が得られないことです。 http:// stackoverflow。com/questions/5517744/remove-extra-button-spacing-padding-in-firefox/5518143#5518143 –

+0

@George Baileyリンクをありがとう。 – Neil

0

はあなたのCSSを見ずに言うのは難しいIt's、しかし、あなたはのCSSをチェックするとYUIリセット、あなたはそれが表示されます継承されたものを除いて、button要素のプロパティを設定したりリセットしたりすることはありません。また、私が知る限りパディングは含まれません。

+0

私のCSSはいくつかにまたがってカスケードされています*シート*といくつかの場所があるので、計算されたスタイルを提供する方が簡単だと思いました。これはすべて重要なことではありませんか? FFとCの両方の計算されたスタイルは、パディングが0であることを示しています。 – JoJo

+0

@JoJo前にこの問題は一度もありませんでした。 – jeroen

+0

私たちのウェブサイトではビデオプレーヤーのプラグインが必要なので表示するのは少し難しいですが、回避策があります。 http://www.veetle.comにアクセスしてください。次に、コンソール(Firebug)を開いてページの一番下に新しいボタンを追加します: '$$( 'body')first()。appendChild((new Element( 'button'))。 ')); '。 FFに余分なパディングがあることがわかります。 – JoJo

関連する問題