！important and display：none and .height（）weirdness

昨天我發現了一些奇怪的東西，當使用一段JS代碼時。我有一個隱藏的div（display:none），我在JS的一些計算中使用它的高度。這一切都工作正常，直到我加入我的「隱藏」類（其中有display:none !important）。！important and display：none and .height（）weirdness

突然高度總是0。顯示屏上沒有其他變化，只有!important。

一些挖後，我已經縮小問題下來的東西，我覺得相當奇怪：

#b { display:none; }   /* reported height is 36 */ 
#c { display:none !important; } /* reported height is 0 */

我創建了一個非常基本的JSFiddle來隔離。它也使用香草JS來獲得高度，這似乎工作得很好/如預期。

似乎jQuery不正確地報告隱形DIV的高度，並且!important行爲正確。

這是jQuery中的錯誤嗎？

來源

2014-02-25 Eirik Hoem

最有可能你的'顯示：沒有;'沒有！！重要'被否決。顯示無應該確實返回0 – timo

可能重複的[jQuery：height（）/ width（）和「display：none」]（http://stackoverflow.com/questions/3632120/jquery-height-width-and-displaynone ） – DAC84

@ user3008011不，請看小提琴。 –

我不認爲這是jQuery的一個bug，jQuery的設置display到block的幾分之一秒來計算height，當你設置!important甚至是ovverriden，多數民衆贊成。

我想我們需要一些更多的解釋

目前基本上沒有辦法讓一個元素的height從DOM，如果它不具有任何高度。所以當display是none，height不存在或zero。

在jQuery中，如果display是none，我們可以只設置display到block一秒鐘的一小部分，以獲得height，期間通常由jQuery的做到了這一點inline風格的改變。

<div id="something" style="display:block">/div>

然後height被採用，但在這個時候，如果你已經設置的CSS display:none!important這個內嵌樣式無法正常工作，並height計算變得zero。

在我個人看來，它總是最好不要使用！因爲它使你的代碼/演示很難閱讀。 Css通常有多種方式來覆蓋樣式。

如果仍想繼續，內聯!important可能會覆蓋你的風格，並使用jQuery秀第二技術自行計算高度，或只是覆蓋了jQuery函數來計算高度:)

來源

2014-02-25 08:36:44 sabithpocker

爲什麼'$（'＃c'）'的高度爲0呢？ –

@JamesDonnelly因爲'！important'甚至可以重寫內聯樣式，我們通常認爲它不會被任何東西覆蓋。 – sabithpocker

虐待更好地解釋在答案 – sabithpocker

！important and display：none and .height（）weirdness

回答

相關問題