1

В IE9 некорректно отображается градиент.

<div id="top_menu">
        <ul>
            <li><a href="home.html">Главная</a></li>
            <li class="first_wrap"><a href="#">Подобрать персонал</a>
                <ul class="second">
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Задать вопрос</a></li>
                    <li><a href="#">Это интересно</a></li>
                    <li><a href="#">Отзывы</a></li>
                </ul>
            </li>
            <li><a href="#">Цены</a></li>
                <li><a href="#">оставить <br> заявку</a></li>
                <li><a href="#">оставить резюме</a></li>
                <li><a href="#">контакты</a></li>
            </ul>
        </div>
        </div>

https://jsfiddle.net/v8jrL46b/

3 ответа 3

1

Задавайте градиент в старых ИЕ с помощью filter:

div {
  height: 100px;
  background: rgb(233, 192, 135);
  background: -moz-linear-gradient(top, rgba(233, 192, 135, 1) 0%, rgba(176, 120, 43, 1) 45%, rgba(119, 71, 11, 1) 75%, rgba(131, 76, 11, 1) 86%, rgba(164, 103, 31, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(233, 192, 135, 1) 0%, rgba(176, 120, 43, 1) 45%, rgba(119, 71, 11, 1) 75%, rgba(131, 76, 11, 1) 86%, rgba(164, 103, 31, 1) 100%);
  background: linear-gradient(to bottom, rgba(233, 192, 135, 1) 0%, rgba(176, 120, 43, 1) 45%, rgba(119, 71, 11, 1) 75%, rgba(131, 76, 11, 1) 86%, rgba(164, 103, 31, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9c087', endColorstr='#a4671f', GradientType=0);
}
<div></div>

1

Старые IE ниже 10 версии не понимают свойство linear-gradient, для них есть специальное свойство DXImageTransform.Microsoft.gradient.

Для ІЕ 10+ уже используется префикс -ms-linear-gradient

Например:

div {
  height: 150px;
  width: 150px;
  margin: 50px;
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 52%, #7db9e8 100%);
  background: -ms-linear-gradient(to bottom, #1e5799 0%, #2989d8 52%, #7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}
<div></div>

Подробнее тут или тут

0
background: linear-gradient(to bottom, rgba(233, 192, 135, 1) 0%, rgba(176, 120, 43, 1) 45%, rgba(119, 71, 11, 1) 75%, rgba(131, 76, 11, 1) 86%, rgba(164, 103, 31, 1) 100%);

Добавил после скобок to top вместо to bottom и стало отображаться корректно.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.