Как исправить этот градиент для IE 9 и 10?

Question

КОД:

body { 
    background-color: #CACACA; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACACA), to(#F6FAFB)); 
    background-image: -webkit-linear-gradient(top, #CACACA, #F6FAFB); 
    background-image: -moz-linear-gradient(top, #CACACA, #F6FAFB); 
    background-image:  -ms-linear-gradient(top, #CACACA, #F6FAFB); 
    background-image:  -o-linear-gradient(top, #CACACA, #F6FAFB); 
} 

Используя это во всех браузерах и платформах, это здорово, но для IE 10 градиент блок продолжает повторять, как это:

Что я могу сделать это исправить для IE 10 ?

Для IE 9 градиент даже не работает, он просто показывает #CACACA. Как исправить это для IE 9?

Answer 1

Для IE10: background-image: -ms-linear-gradient(top, color[, color]*);

Для IE9: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='color1', endColorstr='color2', GradientType=0);

Нет повтор: background-repeat: no-repeat

Answer 2

взглянуть на эти два http://webdesignerwall.com/tutorials/cross-browser-css-gradient/comment-page-1 и http://css3pie.com/ это может помочь вам выяснить ваши вещи, чтобы удовлетворить ваши желания.

Answer 3

Во-первых, для IE10:

-ms-linear-gradient уронить и просто использовать linear-gradient без префикса; IE10 не нуждается в префиксе, а IE9 не поддерживает стандарт вообще с префиксом или без него. Поэтому префикс -ms- совершенно не нужен.

Во-вторых, для IE9:

IE9 не поддерживает стандартный синтаксис градиента. Вы можете использовать стиль старой школы filter, поддерживаемый IE8; что работает в IE9, но это отстой - это ужасный синтаксис, он чувствует себя как возвращение к темным векам, и у него есть некоторые неприятные gotchas (несовместимые с ... хех).

Вместо этого я бы предложил использовать этот старый добрый скрипт полифония CSS3Pie для поддержки стандартного синтаксиса градиента в IE9. С этим упрощается работа.