Стиль градиента в фоновом режиме, не работает в IE - PullRequest
0 голосов
/ 13 марта 2012

Я пытаюсь сделать красивую рамку для логотипа, которая будет вставлена ​​в веб-страницу, над которой я работаю.И по какой-то причине IE не будет отображать этот div с исчезающим цветом.Все, что я хочу, - это простой градиент в пустом div с предопределенными размерами.Google Chrome отображает его так, как я хочу, но IE ничего не отображает.И поскольку я скопировал градиентную часть из здесь , не понимая слова, я не могу отладить его.

Вот код (в очень сокращенной версии):

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-8-i">
<style>
#headGreen{
    float: left;
    margin: 52px 0px 0px 0px;
    width : 300px;
    height: 30px;
    background-image: linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -o-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -moz-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -webkit-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -ms-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);

    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.04, rgb(255,255,255)),
        color-stop(0.82, rgb(68,179,68))
    );
}
#header{
    width: 800px;
    height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="headGreen"></div>
</div>
</body>
</html>

Я использую IE9, но мне бы хотелось, чтобы он работал и в других.Спасибо:)

Ответы [ 5 ]

2 голосов
/ 13 марта 2012

Градиенты В Internet Explorer, вплоть до Версии 6, вас не устраивает?

Не беспокойтесь!Проверьте CSS3Pie.

http://css3pie.com/

Спасибо, надеюсь, это поможет!Аарон

0 голосов
/ 13 марта 2012

Следующий фильтр будет читаться только IE:

 #headGreen{
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#44B244');
 }
0 голосов
/ 13 марта 2012

-ms-linear градиент доступен только в IE 10.

Используйте следующее:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
  • filter поддерживается в IE7-
  • -ms-filter рекомендуется в IE8 - 9. Важное примечание: значение свойства должно быть указано .

См. CSS3 кросс-браузерный линейный градиент для подробного объяснения синтаксиса градиентного фильтра.

0 голосов
/ 13 марта 2012

Я не думаю, что IE9 уже поддерживает это, все, что я нашел, это:

Ссылаясь на CSS3 Пожалуйста, IE10 поддержит его.

Я думаю, что старые версии будут работать как они есть:

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

  background-color: transparent;
  background-color: rgba(180, 180, 144, 0.6); 
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
            zoom: 1;
0 голосов
/ 13 марта 2012

Я рекомендую использовать Ultimate CSS Gradient Generator для генерации градиентов.

Он использует собственные фильтры IE и обеспечивает совместимость вплоть до IE6.Я использую это все время.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...