CSS3 PIE가 IE7의 화면에서 끈적 거리는 푸터를 푸시

Question

CSS3 Pie과 함께 this sticky footer layout을 사용 중이며 IE 호환성 모드에서 바닥 글이 화면 아래에 표시되고 CSS3 파이 스타일/배경/등등은 고정 된 바닥 글이가는 정확한 지점에 있습니다.

어떻게 함께 멋지게 연출할 수 있습니까?

IE에서이 jsfiddle을 열고 상단 (IE9의 다시로드 버튼 왼쪽)의 호환성 버튼을 누릅니다. 버튼이 보이지 않으면 메뉴에서 "도구 -> 호환성보기"로 이동하십시오. http://jsfiddle.net/johntrepreneur/srwtC/2/

UPDATE : 를 사용하여 위의 하나가 문제의 정확한 표현되지 않습니다, 대신이 바이올린 예 : 바닥 글의 위치를 ​​변경

http://jsfiddle.net/johntrepreneur/8rZWu/embedded/result/

Answer 1

나를 위해 작동하는 것 같다가 :

#footer 
{ 
    position: absolute; /* This is the important bit */ 
    margin-top: -81px; /* negative value of footer height */ 
    margin-left: 10%; 
    margin-right: 10%; 
    height: 80px; 
    width: 75%; 
    clear:both; 
    text-align: center; 
    font-size: 48pt; 
    font-weight: bold; 

    background: url(bg-image.png) no-repeat #EBEBEB; /*non-CSS3 browsers will use this*/ 
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#EEFF99) to(#66EE33)); /*old webkit*/ 
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#EEFF99, #66EE33); /*new webkit*/ 
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#EEFF99, #66EE33); /*gecko*/ 
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#EEFF99, #66EE33); /*IE10 preview*/ 
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#EEFF99, #66EE33); /*opera 11.10+*/ 
    background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*future CSS3 browsers*/ 
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*PIE*/ 

    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 0; 
    border-top: 1px solid black; 

    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px 10px 0px 0px; 

    behavior: url('/js/lib/PIE-1.0.0/PIE.htc'); 

} 

는 여기를 참조하십시오 :

,

http://fiddle.jshell.net/srwtC/3/show/

이 예에서 작동하는 솔루션에 대한 UPDATE

#footer { 
    max-width: 1200px; 
    min-width: 700px; 
    position: absolute; 
    z-index: 2; 
    height: 50px; 
    left: 0; /*IMPORTANT*/ 
    right: 0; /*IMPORTANT*/ 
    margin: -51px auto 0; 
    border: 1px solid black; 
    border-bottom: 0; 
    background: #E1DAC6; 
    background: url(bg-image.png) no-repeat #EBEBEB; 
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-top: 1px solid black; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px 10px 0px 0px; 
    behavior: url('/js/lib/PIE-1.0.0/PIE.htc'); 
}