В IE9 некорректно отображается градиент
295
22 июля 2017, 05:17
В 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/
Answer 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>Answer 2
Старые 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>Подробнее тут или тут
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47935 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23914 visits
- Как через css изменить цвет png изображения? 10407 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9281 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 31.3.2025 | 23:42