Perché jquery/css richiede un 'px' per la proprietà superiore, ma non per la proprietà width o height?

Question

Ho il seguente pezzo di codice 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'); 

che funziona come previsto dal fatto di posizioni some_div 100 pixel dall'alto del corpo e imposta anche la larghezza e l'altezza di 100 pixel.

Se cambio la linea con la proprietà per topcss('top' , '100'). cioè se tralascio il px, poi la casella non tiene conto della proprietà specificata. Ovviamente, è necessario il px per rendere effettiva la proprietà top.

Mi chiedo il motivo per cui non devo specificare il px per la larghezza e l'altezza della scatola.

Answer 1

Dopo aver utilizzato il codice sorgente, sembra una stranezza di jQuery piuttosto che un browser o una stranezza CSS. La funzione css di jQuery esegue la maggior parte della sua preelaborazione sul valore fornito in this function.

La funzione gestisce alcune stranezze CSS e le stranezze di input in vari modi. Un modo è convertire i numeri in stringhe aggiungendo "px". Questo non si applica mai nel tuo caso perché fornisci stringhe.

jQuery ha anche un set di ganci chiamati su valori CSS prima di impostarli sul nodo DOM. I valori di larghezza e altezza vengono aumentati here per prendere in considerazione IE5.5's box model e il px viene aggiunto da setPositiveNumber().

Conclusione: L'omissione del "px" dagli stili superiore, inferiore, sinistro, destro, larghezza e altezza non è valida. Poiché jQuery sta modificando i tuoi attributi per supportare browser antiquati e valori numerici, stai eliminando CSS non valido negli attributi width e height omettendo il "px"!

Quanto segue funziona:

css('top' , 100)