html - CSS 样式在 Firefox 中被覆盖

Question

这个问题让我难住了一整天。我使用的是 Firefox 8，我有一个位于 div 标签内的 UL 元素，div 标签使用 jQuery UI Accordion 小部件进行动画处理，如下标记所示:

<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。所以上面的内容最终在 Firefox 中呈现如下:

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

在 Chrome 或 IE 中不会发生这种情况，我不知道是什么导致了 FF 中出现这种情况。理想情况下，我想从 jQuery 动态设置宽度，我尝试了 .width(250) 和 .css("width", "250px") 但都没有任何效果，我刚刚在上面的示例中将其设置为内联以进行测试，并确保它被覆盖并重置回 0px。 Firefox 呈现引擎中是否有某些浏览器设置或功能导致此行为。我还尝试检查 jQuery UI CSS 中的样式，但没有看到任何将宽度定义为 0px 的内容。感谢您提供任何帮助，因为我们目前正在努力推出此 Web 应用程序，并且它必须是跨浏览器兼容的。谢谢。

更新:

有一件事我忘了提，这个片段是动态 Javascript 菜单系统的一部分。我不认为我可以在 jsFiddle 上完整地复制它。我想知道菜单生成是否与它有关？尽管菜单代码或 CSS 中没有任何内容指定宽度为 0px。它也没有解释为什么这种情况发生在 Firefox 而不是 IE 或 Chrome。

更新 2

以下是 Chrome 与 Firefox 对比的一些快照

请注意，在 Chrome 中，我使用 jquery 动态计算的宽度按预期应用于 element.style 属性。

但在 Firefox 中，element.style 在页面呈现时重置为 0px。

Answer 1

css也遵循继承..一些css属性是继承自父控件的css。就像 body 标签和其他 parent 一样..使用 FireBug 检查所有这些跨浏览器问题和更好的 UI 设计。我附上一张显示这种继承性的图像。

希望你能明白这一点..如果你想优先考虑某些 css 属性，必须不受父继承属性的影响，然后对它们使用 !important。例如

a{ display: block !important; }

也许你会从中得到一点想法..

如果你在运行时添加东西然后观察 firbug 的变化并根据你的要求更正 GUI 然后使用 .addCss() 代替 .css()。 api.jquery.com/addClass/