我在使用一段JS代码时发现了一些奇怪的东西。我有一个隐藏的div（display:none），我在JS的某些计算中使用了它的高度。这一切都很好，直到我添加了我的“隐藏”类（具有display:none !important）。
突然，身高总是0。显示屏上没有!important以外的其他变化。
经过一番挖掘后，我把问题缩小到了一些我觉得很奇怪的地方：
#b { display:none; } /* reported height is 36 */
#c { display:none !important; } /* reported height is 0 */
我创建了一个非常基本的JSFiddle来隔离它。它还使用vanilla JS来获得高度，这看起来很好/正如预期的那样。
似乎jQuery错误地报告了不可见DIV的高度，!important行为正确。
这是jQuery中的错误吗？
答案 0 :(得分：14)
我不认为这是jQuery中的一个错误，当你设置display时，jQuery会将block设置为height一小段时间来计算!important是ovverriden，就是这样。
我想我们需要更多解释
如果没有任何高度，基本上没有办法从DOM获取元素的height。因此，当display为none时，height不存在或zero。
在jQuery中display为none，我们可以将display设置为block一小段时间以获得height，在此期间inline样式的改变通常由jQuery完成。
<div id="something" style="display:block">/div>
然后height被采用，但此时如果您在css中设置了display:none!important，则此内联样式将无效，并且height计算得到zero。
在我个人看来，最好不要使用！重要，因为这会使您的代码/演示难以阅读。 Css通常有多种方式来覆盖样式。
如果您仍想继续，内联!important可能会覆盖您的样式，并使用jQuery show为第二种技术自己计算高度，或者只是覆盖jQuery函数来计算高度：）