Firefox 中的 CSS 样式被覆盖答案

【问题标题】：CSS style being overridden in FirefoxFirefox 中的 CSS 样式被覆盖
【发布时间】：2011-11-11 05:57:54
【问题描述】：

这个问题困扰了我一整天。我正在使用 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 的任何内容。感谢任何帮助，因为我们目前正试图推出这个网络应用程序，它必须是跨浏览器兼容的。谢谢。

更新：

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

更新 2

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

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

但在 Firefox 中，element.style 在页面渲染时被重置为 0px。

【问题讨论】：

给定的代码在这里可以正常工作（FF8.0），你能在 jsfiddle 上放一个不工作的例子吗？
您是在本地还是在实时 Web 服务器上执行此操作？您在 Chrome 和 FF 之间的 CSS 根本不匹配...可见性缺失，margin-top 缺失，显示设置为无，顶部被覆盖。你确定其他一切都一样吗？如果实时执行此操作，您可能正在使用 CSS 文件的缓存版本。我会发布生成手风琴的 jQuery 代码。

标签： html css firefox web-applications

【解决方案1】：

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

希望您对此有所了解。如果您想优先考虑某些 css 属性，则不能受父继承属性的影响，然后使用 !important 和它们。例如

a{ display: block !important; }

也许你会从中得到一点启发。

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

【讨论】：