Dlaczego jquery/css wymaga "px" dla najwyższej właściwości, ale nie dla właściwości width lub height?

Question

Mam następujący fragment kodu 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'); 

który działa zgodnie z oczekiwaniami, że pozycje to some_div 100 pikseli od górnej ciała i również ustawia jego szerokość i wysokość 100 pikseli.

Jeśli zmienię linię z właściwością top na css('top' , '100')., tzn. Jeśli pominę px, to pole nie uwzględnia podanej właściwości. Oczywiście, aby najlepsza właściwość zaczęła obowiązywać, wymagany jest px.

Zastanawiam się, dlaczego nie muszę określać px dla szerokości i wysokości pudełka.

Answer 1

Po obejrzeniu kodu źródłowego wygląda raczej na dziwactwo jQuery niż na przeglądarkę lub dziwność CSS. Funkcja css jQuery wykonuje większość wstępnego przetwarzania na podstawie podanej wartości w this function.

Funkcja zajmuje się pewnymi dziwactwami CSS i wejściowymi dziwactwami na różne sposoby. Jednym ze sposobów jest zamiana liczb na ciągi przez dodanie "px". To nigdy nie ma zastosowania w twoim przypadku, ponieważ dodajesz ciągi.

jQuery ma również zestaw haków, które są wywoływane na wartościach CSS przed ustawieniem ich w węźle DOM. Twoje wartości szerokości i wysokości są zwiększane here, aby uwzględnić IE5.5's box model, a piksele są dodawane przez setPositiveNumber().

Wniosek: Pominięcie 'px' z górnego, dolnego, lewego, prawego, szerokości i wysokości jest nieprawidłowym CSS. Ponieważ jQuery modyfikuje twoje atrybuty do obsługi przestarzałych przeglądarek i wartości liczbowych, unikasz nieprawidłowych CSS w atrybutach szerokości i wysokości, pomijając "px"!

następuje działa:

css('top' , 100)