！important和display：none和.height（）怪异

Question

昨天我在使用一段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来隔离它。 它还使用香草JS来获得高度，这看起来很好/正如预期的那样。

似乎jQuery错误地报告了不可见DIV的高度，而且!important行为正确。

这是jQuery中的错误吗？

Answer 1

我不认为这是jQuery中的一个错误，jQuery设置display block一小段时间来计算height ，当你设置!important甚至是ovverriden，那就是全部。

我想我们需要更多解释

目前基本上没有办法让height从DOM元素，如果它不具有任何高度。 因此，当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函数来计算高度:)