!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的一个bug,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被采取,但此时,如果你已经设置display:none!important在CSS这种内联样式不会工作,并height计算成为zero.

在我个人看来,最好不要使用!重要因为它使您的代码/演示文稿难以阅读.Css通常有多种方式来覆盖样式.

如果您仍想继续,内联!important可能会覆盖您的样式,并使用jQuery show为第二种技术自己计算高度,或者只是覆盖jQuery函数来计算高度:)