CSS를 사용하여 들쭉날쭉 한 가장자리가 IE에서 올바르게 렌더링되지 않음

Question

내 웹 페이지 하단에 톱니 모양 효과를 추가하려고합니다.

http://d.pr/i/GpOb

나는 다음과 같은 결과를 얻을 인터넷 익스플로러를 제외한 모든 브라우저에서 잘 작동 몇 가지 코드를 발견 할 수있다.

http://d.pr/i/VdLe

는 불행하게도 인터넷 익스플로러를 피하는 것은 옵션이 아니다 나는이 문제를 해결하는 방법에 대한 내 지식의 한계입니다.

이것은 CSS 파일에서 사용하는 코드입니다.

  #footer { 
      position:relative; 
      width: 100%; 
      height: 280px; 
      margin-top:5px; 
      background-color: #ab1919 ; 
      z-index:1; 
      border-bottom: 10px ridge #ab1919 ; 
      } 


      #footer:before { 

      content: " "; 
      display:block; 
      position: relative; 
      top:0px;left:0px; 
      width:100%; 
      height:36px; 
       background: linear-gradient(#fff 0%, transparent 0%), linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%; 
       background: -webkit-linear-gradient(#fff 0%, transparent 0%), -webkit-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -webkit-linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%; 
       background: -o-linear-gradient(#fff 0%, transparent 0%), -o-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -o-linear-gradient(45deg, #ab1919 33.33%, #fff.33%) 0 0%; 
      background: -moz-linear-gradient(#fff 0%, transparent 0%), -moz-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -moz-linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%; 
       background-repeat: repeat-x; 
       background-size: 0px 100%, 9px 27px, 9px 27px; 
      } 

누구든지이 문제에 도움을받을 수 있다면 영원히 감사 할 것입니다.

감사

Answer 1

이미지 http://jsfiddle.net/kevinPHPkevin/YyyP9/

body, html { 
    height:100%; background:url(http://www.hscripts.com/freeimages/icons/symbols/shapes/triangle/triangle-image8.gif); 
    background-repeat:repeat-x; 
    background-position:bottom; 
}