FirefoxでCSSスタイルがオーバーライドされています

Question

この問題は私に一日中困惑していました。私はFirefoxの8を使用していると私はdivタグの内側に位置してUL要素を持っている、divタグは、jQueryのUIアコーディオンウィジェットでアニメーション化されて次のマークアップを示して：

<div id="accordion"> 
    <a class="ui-accordion-header">Section 1</a> 
    <ul style="width: 250px !important;"> 
     <li> 
      <dl id="MyDefinitionList"></dl> 
     </li> 
    </ul> 
</div> 

私の問題は、そのFirefoxでありますタグのインライン幅のスタイルが上書きされ、0pxにリセットされます。

<div id="accordion"> 
    <a class="ui-accordion-header">Section 1</a> 
    <ul style="width: 0px;"> 
     <li> 
      <dl id="MyDefinitionList"></dl> 
     </li> 
    </ul> 
</div> 

これはクロムやIEには発生しませんし、私はFFでこれを引き起こしているものは考えている。だから、上記次のようにFirefoxでレンダリングされてしまいます。理想的には、jQueryから動的に幅を設定したいと思いますが、私は.width(250)と.css("width", "250px")を試しましたが、いずれも効果がありません。上記の例ではインラインに設定してテストしましたが、十分に上書きして0pxに戻します。この動作を引き起こすFirefoxレンダリングエンジンには、ブラウザの設定や機能がありますか？私はまた、jQuery UI CSSのスタイルをチェックしようとしましたが、幅を0pxとして定義したものは表示されませんでした。私たちは現在、このWebアプリをプッシュアウトしようとしており、ブラウザ間で互換性がなければなりません。ありがとう。

UPDATE：

私はこのスニペットを言及するのを忘れてしまったことの一つは、動的なJavaScriptのメニューシステムの一部です。私はそれが全体でjsFiddleにそれを複製できるとは思わない。メニュー生成に何か関係があるのだろうか？メニューコードやCSSには0pxの幅を指定するものは何もありませんが、 IEやChromeではなく、Firefoxでこれがどうして起こるかは説明しません。ここでは2

UPDATEは、予想通り、私は動的にjQueryを使用して計算幅がelement.styleプロパティに適用される Firefoxの

注にクロムに比べクロムからいくつかのスナップショットです。

しかしFirefoxので、element.styleは、レンダリングページ上に0PXにリセットされます。

Answer 1

CSSはまた、継承に従ってください。..いくつかのCSSプロパティは、親コントロールのCSSから継承されます。 bodyタグやその他の親からのように.. FireBugを使用してブラウザ間の問題やUIデザインを確認してください。私はそのような継承を示すイメージを付けています。

は、あなたがこのことについてアイデアを得ることを願っています。.. あなたには、いくつかのCSSプロパティを優先したい場合は、親継承されたプロパティの影響を受けない必要がありますし、それらを!importantを使用しています。例：

a{ display: block !important; } 

これではほとんど分からないでしょう。

実行時に追加する場合は、firbugの変更を観察し、要件に応じてGUIを修正し、.css()の代わりに.addCss()を使用します。 api.jquery.com/addClass/