!important css 不会覆盖 Firefox 中的属性答案

【问题标题】：!important css is not overriding the property in firefox!important css 不会覆盖 Firefox 中的属性
【发布时间】：2015-07-15 11:02:04
【问题描述】：

它在 safari 和 chrome 中运行良好

<nav class="navbar navbar-fixed-bottom navbar-inverse navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas" style="height:200px !important;">
</nav>

但在Firefox中它的高度为888px

<nav class="navbar navbar-fixed-bottom navbar-inverse navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas" style="height:888px">
</nav>

那么如何覆盖它

【问题讨论】：

该样式可能会使用某种 js 添加，您需要找到它并停止它或使用您的样式表覆盖它
请提供jsfiddle。
@Pete 我尝试过使用它不会覆盖的样式表，你知道还有其他替代解决方案吗
内联 css 覆盖？
您使用什么脚本来设置导航元素的高度？通常通过 style 属性的 css 是一个赠品，它是通过 js 设置的值。所以设置值的脚本计算的高度不正确。

标签： css twitter-bootstrap firefox

【解决方案1】：

我无法模拟您的情况进行测试，但我认为这可能会解决您的问题或帮助进一步诊断问题。

在文档加载和解析后使用 javascript 更改内联样式。

window.onload = function()
{
   window.setTimeout(function(){
   document.getElementById('js-bootstrap-offcanvas').style.height = '200px';
   },100);
};

请告诉我会发生什么。希望这会有所帮助；）

【讨论】：

你为什么要用setTimeout函数
因为我担心代码会在元素完成解析之前运行。我不想冒险，所以我设置了十分之一秒的超时时间，以确保一切都完成。