在Firefox中重写CSS样式

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继承而来的。 像身体标签和其他父母一样.. 使用FireBug检查所有这些是否存在跨浏览器问题和更好的UI设计。我附上的图像显示出这样的无意义。

希望你能得到关于这个的想法.. 如果你想优先考虑一些css属性不能受父继承属性的影响，那么就使用!important。 e.g。

a{ display: block !important; }

可能你会从中得到一些想法..

如果您在运行时添加内容，则观察firbug中的更改并根据您的要求更正GUI，然后在.addCss()的位置使用.css()。 api.jquery.com/addClass/