2012-05-14 8 views
5

私はサイトのさまざまな側面でJQueryUIを使用していましたが、Firefoxの場合を除いて小さなタブ付きメニューセットがうまくいきました。下の画像は、上に表示されているのと同じコードと、下のIE9を示しています。タブの下の隙間と、タブ内の詰め物の増加(可能性)があることに注意してください。私はサイト(2番目の画像)からJQueryの基本UIを1つだけ残して、すべてのスタイルシートを削除しましたが、ギャップはまだ表示され、Firefoxでのみ表示されます。FirefoxのJQuery UIを使用してタブの下にあるギャップ

ザ・jsの呼び出しは、それができるよう、基本的なようです:

$("#menuTabs").tabs(); 

それは私がIEは、Firefoxよりも優れている表示の問題を持っていない場合が多いのです...私は生成されたすべてのCSSを除去し、そこだことを確認したましたスタイルが適用されていない、私は次のどこを見なければならないのか分からない!

あなたがそれを引き起こしている可能性がありますどのようになどの任意の提案を提供することができる場合、私は幸せチャッピーだろう!

IE and Firefox rendering the same menu IE and Firefox rendering with none of my stylesheets in place

[EDIT] 限り私ができるように、コードを縮小し、「既知の正常な」ライブラリのみを使用した後、それはそれはそれは表のセルであることに起因していることが判明!

ここにあなたと遊ぶことができるいくつかのコードがあります! しかし、 "Normalized CSS"がチェックされていると機能しますので、セルから継承されたパディングになる可能性がありますか?

[編集#2]

右。

So.

これは、CSSスタイルは、パディングとマージンとの境界線を削除するには、テーブルに適用されるなど十分ではないことが判明。 cellpadding = "0"とcellspacing = "0"をテーブル定義に含める必要があります。それ以外の場合は、jQueryのタブに余分な余白があります。

奇数取り除かテーブル間隔/パディングとhttp://jsfiddle.net/XVHTk/1/

jsFiddle:テーブルなしのエキストラと

jsFiddle HTML細胞の性質がタブに転送されているのはなぜhttp://jsfiddle.net/XVHTk/2/

、私は考えています。私はそれを固定して幸せです!

+0

Firebugを使用して、ギャップを作り出していることを確認してください。パディングまたはマージンの問題です。 – Romias

+0

jQueryUIのcssファイルのものを除いて、スタイルはありませんでした(上記のfiddlesを参照)。しかし、内部にあるテーブルからhtmlプロパティの継承がスタイルに流入したようです。どのように、なぜ、なぜ今のところ修正されているのか分かりません。 – CrazyChris

+0

編集、説明、解決をお寄せいただきありがとうございます!私は同じ不満な問題を抱えていた。 – Redtopia

答えて

1

これはui-helper-clearfixクラスのバグが原因で発生します。 ticket #8442およびthe associated fixを参照してください。チケットからわかるように、これは1.10.1で修正されました。私はこのworking properly with 1.10.1using 1.8.x with additional CSS to fix the issueを示すフィドルを作成しました。後者は、今すぐ1.10.1+にアップグレードできない場合、次のCSSを含めることができます:

.ui-helper-clearfix:after { 
    border-collapse: collapse; 
} 
関連する問題