2012-06-20 13 views
5

Pracuję nad wykorzystaniem projektu, który używa jQuery, i muszę dynamicznie ustawić szerokość opartą na calc() przy użyciu jQuery. Problem polega na tym, że przez cale do pracy, CSS musi wyglądać następująco:Ustawianie wszystkich prefiksowanych fabrycznie wersji "width: calc ..." Z jQuery?

CSS

width: -moz-calc(33% - 50px); 
width: -webkit-calc(33% - 50px); 
width: calc(33% - 50px); 

Kiedy próbuję użyć jQuery $(selector).css('width', 'calc(33% - 50px)'), nie mogę ustawić szerokość ze stwardnieniem dostawcy prefiksem wersje calc. Jaki jest właściwy sposób obsługi wielu ustawień tej samej właściwości CSS w jQuery, aby zezwolić na prefiks dostawcy?

+0

Dodam nowy hak css. http://api.jquery.com/jQuery.cssHooks/ –

Odpowiedz

0

Próbowałeś coś takiego:

calc = "calc(33% - 50px)"; 

if ($.browser.webkit) { 
    calc = "-webkit-"+calc; 
} 

$(selector).css('width',calc); 
+2

Sniffowanie przeglądarki to okropny, okropny pomysł. Istnieją warianty WebKit, z których niektóre mogą obsługiwać -webkit-calc, a niektóre nie, niektóre teraz, ale nie w przyszłości, niektóre z dodatkowymi funkcjami, takimi jak attr() wewnątrz calc, a niektóre nie itp. Itd. Do czasu, gdy Modernizr obsługuje zmiana jego "prefiksowanej" możliwości, która obsługuje calc, poleciłbym ustawić właściwość z każdym prefiksowanym wariantem calc, a następnie odczytać wartość, aby zobaczyć, czy "wziął", w takim przypadku możesz mieć pewność, że przeglądarka obsługuje wersję przeprowadź cię przez to. –

Powiązane problemy