5

私は自分のサイトのさまざまな側面で JQueryUI を使用してきましたが、Firefox を除いて、小さなタブ付きメニュー セットはうまく機能していました。下の画像は、上に Firefox、下に IE9 でレンダリングされた同じコードを示しています。タブの下のギャップと、(可能性がある?) タブ内のパディングの増加に注意してください。サイトからすべてのスタイルシート (2 番目の画像) を削除し、ベースの JQuery UI のみを残しましたが、ギャップは引き続き表示され、Firefox でのみ表示されます。

js 呼び出しは可能な限り基本的なものです。

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

IE が firefox よりも優れている表示の問題が発生することはあまりありません...生成したすべての CSS を削除し、スタイルが適用されていないことを確認した後、次にどこを見ればよいか途方に暮れています!

何が原因であるかについて提案を提供できる場合は、私は幸せなチャッピーになります!

IE と Firefox で同じメニューをレンダリングする スタイルシートが配置されていない IE と Firefox のレンダリング

[編集] できる限りコードを縮小し、「既知の適切な」ライブラリのみを使用した後、テーブル セルにあることが原因であることが判明しました!

ここにあなたが遊ぶことができるいくつかのコードがあります！http://jsfiddle.net/XVHTk/ ただし、「Normalized CSS」がチェックされている場合は機能するため、セルから継承されたパディングである可能性がありますか?

[編集＃2]

右。

そう。

パディング、マージン、ボーダーなどを削除するためにテーブルに適用された CSS スタイルでは不十分であることがわかりました。テーブル定義に cellpadding="0" と cellspacing="0" を含める必要があります。そうしないと、jQuery タブの周囲に余分なパディングが含まれます。

奇数。

jsFiddle テーブルあり、エクストラなし: http://jsfiddle.net/XVHTk/1/

テーブルの間隔/パディングを取り除いた jsFiddle: http://jsfiddle.net/XVHTk/2/

HTML セルのプロパティがタブに転送される理由がわかりません。修正できただけで満足です！

4

1 に答える 1

1

ui-helper-clearfixこれは、クラスのバグが原因です。チケット #8442と関連する修正を参照してください。チケットからわかるように、これは 1.10.1 で修正されました。これが 1.10.1 で適切に動作し、 1.8.xと追加の CSS を使用して問題を修正することを示すフィドルを作成しました。後者は、今すぐ 1.10.1+ にアップグレードできない場合は、次の CSS を含めるだけでよいことを示しています。

.ui-helper-clearfix:after {
    border-collapse: collapse;
}
于 2013-04-10T21:08:44.167 に答える