Firefox:入れ子になったDIVは正しく整列しません -- css フィールド と firefox フィールド 関連 問題

Firefox: nested div doesn't align properly












0
vote

問題

日本語

FFを除くすべてのブラウザではうまく見えるボタンがあります。

<事前> <コード> <button><div>Button Text</div></button>

gistは私がボタンとアンプの背景を持っているということです。ボタンを任意の幅にスケーリングできるように、DIV。 Firefoxでは、DIVはボタンより1ピキス低いと、なぜわからわからない。

デモ: http://jsfiddle.net/cwolves/fghv4/4/ < / P>

簡易コード:

 <コード> <button><div>foo</div></button>  <style> button {     border      : 0px;     background  : #CCC;     height      : 29px;     line-height : 29px;     padding     : 0px; }  div {     background  : #AAA;     height      : 29px;     line-height : 29px;     position    : relative;     left        : 7px; } </style>   

英語

I have a button that looks fine in every browser except FF:

<button><div>Button Text</div></button> 

The gist is that I have a background on the button & div so that the button can be scaled to any width. In Firefox, the div is 1px lower than the button, and I'm not sure why.

Demo: http://jsfiddle.net/cwolves/FgHV4/4/

Simplified code:

<button><div>foo</div></button>  <style> button {     border      : 0px;     background  : #CCC;     height      : 29px;     line-height : 29px;     padding     : 0px; }  div {     background  : #AAA;     height      : 29px;     line-height : 29px;     position    : relative;     left        : 7px; } </style> 
</div
     
   
   

回答リスト

0
 
vote
vote
ベストアンサー
 

それを一致させる(たとえば)Chromeには、これが必要です。

<事前> <コード> button::-moz-focus-inner { border: 0; padding: 0; }

を参照してください:の http://jsfiddle.net/FgHV4/5/

無関係音符の<コード> div <コード> button ではない>(HTML5で)。あなたは、<コード> span はそれを変更する必要があります。

 

To make it match (for example) Chrome, you need this:

button::-moz-focus-inner {      border: 0;     padding: 0; } 

See: http://jsfiddle.net/FgHV4/5/

On an unrelated note div is not a valid child of button (in HTML5). You should change it to a span.

</div
 
 
   
   

関連する質問

1  Firefox 3拡張javascript重複イベントリスナー上のロード  ( Firefox 3 extension javascript duplicated event listener on load ) 
Firefox 2用に書かれた延長を修正してFirefox 3を修正していました3. 変更の1つが使用することでした: <事前> <コード> window.getBrowser().addEventListener("load", checkURL, tr...

2  Firefoxでコピー&ペーストします  ( Copy paste in firefox ) 
WYSIWYGエディタの作業中に、Firefoxの壁をクリップボードにアクセスする(まだテストされていません)。 誰かがなぜコピーをクリップボードに制限されているのかを説明しますか? 私はこれが幻想的に使われることができる単一の方法を考えることはできま...

4  Fire Fox 2.0xでローカルにデバッグすると、Visual Studioが常にページを正しくレンダリングしないのはなぜですか?  ( Why doesnt visual studio always render my page correctly when debugging locally ) 
Fire Foxでローカルでデバッグしたとき、私のページには正しく追加されていないスタイルが完全にレンダリングされない場合(最後は表示されています)。これを修正するために複数のリフレッシュまたはシフトリフレッシュが必要です。これは一般的な問題ですか、それとも...

42  SafariとFirefoxのHTML5ビデオ(MP4とOGV)の問題 - しかしクロムはすべて良いです  ( Html5 video mp4 and ogv problems in safari and firefox but chrome is all goo ) 
次のコードがあります。 <事前> <コード> <video width="640" height="360" controls id="video-player" poster="/movies/poster.png"> <source src="/movi...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...

12  Firebugのキーボードショートカットをカスタマイズする方法はありますか?  ( Is there a way to customize firebugs keyboard shortcuts ) 
Firebugのキーボードショートカットをカスタマイズする方法はありますか? Firebugの script パネルを使用してJavaScriptコードを実行できるのが大好きですが、コード不足のデフォルトのキーボードショートカットを使用するか、マウスを使用し...

3  Dom.のFirefoxサイドバーと文書オブジェクト  ( Firefox sidebar and document object of dom ) 
FirefoxサイドバーにロードされたWebページと、メイン文書にロードされている別のWebページがあります。今、Firefoxサイドバーを通してメイン文書オブジェクトにアクセスするにはどうすればよいですか? Firefoxサイドバー文書のJavaScrip...

6  Firefox:プラグイン拡張?  ( Firefox plugin vs extension ) 
プラグインVSの機能の違いについては不明です 延長。 年の間、私は普通の古いNPAPIプラグインを書いた。それは/図書館に住んでいました/ Mac上のプラグインとPC上で似ている場所。 Firefox 3.6では、IT 動作を停止。見回して、私はこれを見ます:...

2  Firefox XPCOMコンポーネント - メソッドの呼び出しに拒否された権限  ( Firefox xpcom component permission denied to call method unnamedclass ) 
Firefox XPCOMコンポーネントは複数のページにまたがってページ内容を読み書きできますか? シナリオ: ローカルのHTMLファイルとJavaScriptファイルの束。 "main.html"ファイルがウィンドウ "pluginwindow"を開き、...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有