CSS IE background background gradient

Question

Я использую линейный градиент CSS на веб-сайте. Фон работает нормально во всех браузерах, которые я тестировал, за исключением IE. Каким-то образом IT, похоже, не расширяет фон ниже нижнего колонтитула wordpress. Все остальные браузеры масштабируют фон на всей странице.

Я использую следующий код - который включает в себя специальный код для большинства фрезы:

body{ 
background: #ffffff; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0);!important /* IE6-9 */ 
font: normal 12px/100% "Arial", Arial; 
} 

Любая идея, почему IE отсекает фон?

Большое спасибо!

Answer 1

Try:

html, body { 
    height: 100%; 
    min-height: 100%; 
} 

Answer 2

Вы должны использовать изображение, чтобы иметь градиент в фоновом режиме:

body{ 
background: url(yourimage.jpg) repeat-x left top #ffffff; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0);!important /* IE6-9 */ 
font: normal 12px/100% "Arial", Arial; 
} 

Для более старых версий браузеров они все еще нуждаются изображения, чтобы дать тот же эффект.

Чтобы получить градиент в нижней части страницы, попробуйте следующее:

var bodyheight =$(window).height(); 
$('body').css({'min-height':bodyheight +'px'}); 

выше JQuery заставит тело иметь минимальную высоту размера окна пользователей.

Answer 3

Я думаю, что вы можете это исправить, добавив следующую строку перед объявлением стилей тела:

html {height:100%;} 

Посмотри в fiddle

Примечание: Вы должны установить !important непосредственно перед точкой с запятой, так как это :

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0)!important /* IE6-9 */;

Answer 4

фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# cccccc', endColorstr = '# 000000');/* для IE */