在Firefox中覆盖的CSS样式

这个问题让我整天陷入困境。我使用的是Firefox 8和我的影片位于div标签内的UL元素，div标签是动画与jQuery UI的手风琴widget作为下面的标记显示：在Firefox中覆盖的CSS样式

<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应用程序被推出，并且它必须是跨浏览器兼容的。谢谢。

UPDATE：

有一件事我忘了提这个片段是一个动态的Javascript菜单系统的一部分。我认为我完全可以将它复制到jsFiddle上。我想知道菜单代与它有什么关系？虽然菜单代码或CSS中没有指定宽度为0px的内容。它也不能解释为什么会发生在Firefox中，而不是IE或Chrome。

UPDATE 2

下面是从铬一些快照相比火狐

注意在铬如预期我计算动态使用jquery宽度被施加到element.style属性。

enter image description here

但火狐，则element.style复位页面在为0px渲染。

enter image description here

来源

2011-11-11 kingrichard2005

这段代码在这里工作得很好（FF8.0），你可以把一个非工作的例子放在jsfiddle上吗？ –

你在本地或在实时Web服务器上执行此操作吗？ Chrome和FF之间的CSS完全不匹配......缺少能见度，margin-top缺失，display被设置为none，top被覆盖。你确定一切都一样吗？如果这样做，您可能会使用CSS文件的缓存版本。我会发布生成手风琴的jQuery代码。 – skyline3000

的CSS也跟着的传承..一些CSS属性从父控件的CSS继承。就像从身体标记和其他父母一样。使用FireBug检查所有这些对于跨浏览器问题和更好的UI设计。我附上一张显示这种无声的图像。 enter image description here

希望你能得到关于这个的想法.. 如果你想优先考虑一些CSS属性不能由父母继承的属性影响，然后使用!important他们。例如

a{ display: block !important; }

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

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

来源

2011-11-11 06:15:39

在Firefox中覆盖的CSS样式

回答

相关问题