jQuery.css() 메소드의 모든 브라우저에서 CSS를 코딩하는 방법은 무엇입니까?

Question

멀티 브라우저 CSS가 필요한 동적 그래디언트를 추가하고 있습니다. 그것은 하나의 브라우저에서 지시하고 CSS 파일로 작성된 경우에도 작동하지만 jquery에서 .css() 메소드를 사용하면 배경을로드하지 못합니다. 하나의 '배경'을 사용하는 동안 모든 브라우저 CSS를 추가 할 때 작동하지 않습니다 내 코드의 예입니다 제가 여기서 뭘하려고 오전의 아이디어 ...

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
      $jj('.fixedElement').css({ 
       'position': 'fixed', 'top': '0px', 'z-index': '9999', 
       'width': '120%','paddingRight': '20%', 'paddingLeft': '20%', 
       'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888', 
       'lineHeight': '100%', 
       'background': '#00172A', 
       'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)', 
       'background': '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)', 
       'background': '-webkit-gradient(linear, left top, left bottom, color-stop(80%,#00172A), color-stop(100%,#2F71B3))', 
       'background': '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)', 
       'background': '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)', 
       'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#00172A\', endColorstr=\'#2F71B3\',GradientType=0)', 
       'background': 'linear-gradient(top, #00172A 80%, #2F71B3 100%)', 
       'color': '#ffffff' 
      }); 

를 얻으려면가에서 작동 전화 당신은 코드를 찾을 수있는이 파이어 폭스에서 작동 예를 들어 브라우저 선택 ...

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
      $jj('.fixedElement').css({ 
       'position': 'fixed', 'top': '0px', 'z-index': '9999', 
       'width': '120%','paddingRight': '20%', 'paddingLeft': '20%', 
       'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888', 
       'lineHeight': '100%', 
       'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)', 
       'color': '#ffffff' 
      }); 

는 http://www.thediabetesnetwork.com에 살고 있습니다. 수정 : json 개체에서 CSS를 제거하고 jquery API를 사용하여 수정. 호출이 json 대괄호로 싸여 있고 json 구문을 사용하는 방법에 주목하십시오. 이것이 문제였습니다. 이제는 이렇게 보입니다.

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
      $jj('.fixedElement').css('background', 'linear-gradient(top, #00172A 80%, #2F71B3 100%)'); 
      $jj('.fixedElement').css('background', '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)'); 
      $jj('.fixedElement').css('background', '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)'); 
      $jj('.fixedElement').css('background', '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)'); 
      $jj('.fixedElement').css('background', '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)'); 
      $jj('.fixedElement').css('background', '-webkit-gradient(linear, left top, left bottom, color-stop(80% #00172A), color-stop(100%,#2F71B3))'); 
      $jj('.fixedElement').css(
       { 
       'position': 'fixed', 
       'top': '0', 
       'z-index': '9999', 
       'width': '120%', 
       'paddingRight': '20%', 
       'paddingLeft': '20%', 
       'marginLeft': '-10%', 
       'left': '0', 
       'boxShadow': '0 3px 5px #888888', 
       'lineHeight': '100%', 
       'paddingTop': '0', 
       'paddingBottom': '0', 
       'color': '#ffffff' 
      }); 

Answer 1

는 여기를 참조하십시오 : http://blog.jquery.com/2012/08/09/jquery-1-8-released/ 당신이 할 필요가 linear-gradient를 사용하여 jQuery를 자동으로 나머지 polyfill 것이다.

구형 IE에서 그래디언트 지원을 위해 CSS Pie을 설치하는 것을 잊지 마십시오. 당신은이 질문을 확인해야