Internet Explorer 11에서 CSS 그래디언트가 제대로 작동하지 않습니다.

Question

배경의 일부로 사용하고있는 CSS 그래디언트가 전체 페이지 길이를 차지하는 대신 120 픽셀마다 반복되는 것이 문제입니다. 신중한 실험을 거친 후 Internet Explorer 11이 페이지 길이가 120px라고 생각한다는 문제가 있음을 알았습니다. Edge, Firefox 또는 Chrome에서이 문제가 발생하지는 않습니다 (Chrome에 동일한 문제가 있지만 CSS는 인식 된 페이지 높이를 무시하는 방식으로 코딩 됨).

페이지 길이가 120px가 아니라는 것을 Internet Explorer에 알리기 위해 CSS를 수정할 수있는 방법이 있습니까?

관련 데이터 : 그라데이션과 관련된 기존의 코드는

입니다

: 위의 http://www.http://madinskincareland.com

: 문제의 블로그에

body{background: #fdb6b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
background: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
background: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
background: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
background: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); /* IE6-9 */} 

링크가 문제가 정확히 무엇인지 확인하는 방법 IE11은 다음과 같이 렌더링됩니다 : Firefox 51.0.1 렌더링 방법 (사용 가능한 모바일 장치를 포함하여 테스트를 거친 다른 모든 브라우저가 올바르게 렌더링 됨)

Answer 1

CSS/선형 그라디언트 문서에 따르면 배경 이미지를 사용해야합니다. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

body{ 
    background-color: #fdb6b4; /* Old browsers */ 
    background-image: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
    background-image: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
    background-image: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
    background-image: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
    background-image: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); 
} 

Answer 2

나는 몸 태그에 그라데이션을 적용과 같은 문제가 있었다. 내가하는 일은 본문 안쪽에 다른 태그 (예 : Main 또는 section)를 추가하고 상대적인 상위 0, 왼쪽 0으로 배치 한 다음 해당 요소에 그라디언트를 적용하는 것입니다. 이게 도움이 되길 바란다!