爲什麼jquery/css需要頂部屬性的「px」，但不是寬度或高度屬性？

Question

我有以下一段JavaScript/jQuery代碼：

var some_div = $('<div>', {}); 

some_div. 
    css('position', 'absolute'). 
    css('width' , '100'). 
    css('height', '100'). 
    css('top' , '100px'). 
    css('background-color', '#ddf'); 

some_div.appendTo('body'); 

如預期的，因爲它位置時從本體的頂部some_div 100像素並且還設置其寬度和高度爲100個像素，其工作原理。

如果我將top屬性更改爲css('top' , '100').，即如果我省略了px，那麼該框忽略指定的屬性。顯然，px是頂層屬性生效所必需的。

我想知道爲什麼我不必爲箱子的寬度和高度指定px。

Answer 1

閱讀源代碼後，它看起來像一個jQuery怪癖，而不是瀏覽器或CSS奇怪。 jQuery的css函數在this function提供的值上進行大部分預處理。

該函數以各種方式處理某些CSS怪異和輸入怪異。一種方法是通過添加「px」將數字轉換爲字符串。這不適用於你的情況，因爲你提供了字符串。

jQuery還有一組鉤子，它們在將它們設置到DOM節點上之前在CSS值上調用。考慮到IE5.5's box model和px被setPositiveNumber()加上，您的寬度和高度值將增加here。

結論： 省略從上，下，左，右，寬度和高度風格「PX」是無效的CSS。由於jQuery正在修改您的屬性以支持陳舊的瀏覽器和數值，因此您將忽略寬度和高度屬性中的無效CSS，方法是省略「px」！

下面將工作：

css('top' , 100)