IE9 Закругленные углы и CSS-фоновые градиенты, живущие вместе? - PullRequest
Новая
       26

IE9 Закругленные углы и CSS-фоновые градиенты, живущие вместе?

15 голосов
/ 26 мая 2011

Я столкнулся со странной вещью в IE9, пытаясь получить фоновый градиент для отображения.

В основном я применяю несколько классов к объекту контейнера. 

<div class="gradient corners"></div>

Использование этого CSS. 

.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Чтобы получить градиент в IE, я применяю фильтр мусора к своему классу .gradient. 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');

При этом градиент работает, но мои закругленные углы исчезают.

Поэтому я попытался ввести условное выражение для объявления фильтра. 

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

Это возвращает мои углы, но градиент исчезает.

Ответы [ 5 ]

25 голосов
/ 25 сентября 2011

Градиент будет выходить за закругленные углы в IE9, поэтому лучшее решение сейчас добавить один дополнительный div: 

 <div class="corners"><div class="gradient"></div></div>

и скрыть переполнение для .corners 

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

Я рекомендую этот Photoshop-подобный инструмент для создания кросс-браузерных градиентов: http://www.colorzilla.com/gradient-editor/

И этот, чтобы создать border-radius: http://border -radius.com /

2 голосов
/ 17 июля 2012

Это довольно надежное решение проблемы градиентов IE9 и углов.Он использует js для генерации SVG на лету - и это быстро.

http://abouthalf.com/2011/10/04/updated-ie9-gradients-with-rounded-corners/

2 голосов
/ 26 мая 2011

вам не нужен блок if IE.

, просто поместите все 3 (4, если вы включаете оба IE) правила в объявление стиля, браузеры будут выбирать только те, которые они понимают.

пример: 

.gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Также следует отметить, что градиенты в IE будут работать, только если элемент hasLayout (см .: http://reference.sitepoint.com/css/haslayout)

1 голос
/ 12 февраля 2013

Просто используйте div обертки (округленный и скрытый переполнение), чтобы обрезать радиус для IE9. Простой, работает кросс-браузер. SVG или JS не нужны. 

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}
1 голос
/ 05 июля 2012

закругленные углы и фильтр не идут вместе. для IE я всегда включаю http://css3pie.com и использую его для создания границ радиуса и градиентов в IE. Пример CSS выглядит следующим образом: 

.someElement {
    behavior: url(assets/js/PIE.htc);
    border-radius: 10px;
    background: #8cb2d1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #8cb2d1 0%, #4080b3 42%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3));
    background: -webkit-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -o-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -ms-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);
}

Шаги:

  1. включает PIE.htc через поведение
  2. добавить радиус границы как обычно (border-radius: 10px;)
  3. добавить специальный атрибут -pie-background: (-pie-background: linear-Gradient (top, # 8cb2d1 0%, # 4080b3 42%);)
...