IE9 закругленные углы и фильтр: progid: DXImageTransform.Microsoft.gradient - PullRequest
Новая
       10

IE9 закругленные углы и фильтр: progid: DXImageTransform.Microsoft.gradient

12 голосов
/ 06 апреля 2011

Я использовал filter: progid:DXImageTransform.Microsoft.gradient, чтобы получить градиенты для IE <9. Теперь, в сочетании с тенью или другим фоном внизу, у меня торчит коробка. </p>

Есть ли способ сохранить обратную совместимость, без условий и внешних таблиц стилей?

См. Код: 

.class {
    float:left; 
    border:solid 1px #AAA; 
    position:absolute; 
    z-index:1; 
    text-align:left; 
    width:350px; 
    margin: 12px 0px 0px 0px; 
    background:#FFFFFF; 
    border-radius:5px; 
    box-shadow:5px 5px 5px #BBBBBB; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#FFFFFF); 
}

<div class="class">this</div>

Ответы [ 3 ]

14 голосов
/ 06 апреля 2011

Я бы порекомендовал (всем когда-либо!) Использовать технику Пола Айриша , которая выглядит следующим образом: 

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]>  <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->

в вашем HTML.

Тогда в вашемCSS вы можете написать такие вещи, как: 

#someID {
    color:lawngreen;
}

.ie6 #someID {
    color:lightgoldenrodyellow;
}

.ie8 #someID, .ie9 #someID {
    color:saddlebrown;
}

для таргетинга различных IE.Это простой метод, который решает множество проблем (без дополнительных HTTP-запросов, незначительный дополнительный код для всех браузеров).

10 голосов
/ 13 мая 2012

Я потерял радиус своих углов после применения filter: progid:DXImageTransform Microsoft.gradient.... Я полагаю, это похожая проблема.

Чтобы решить эту проблему, я использовал сгенерированный здесь SVG-фон http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Это проще, чем кажется. В CSS это выглядит как 

body.ie9 div.test  {
   border-radius:10px  
   background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz...

и вот, закругленные углы и градиент.

$ 2с, * -Pike

0 голосов
/ 18 декабря 2013

Я нахожу, когда IE дает мне проблемы с вещами, выталкивающими из круглых углов, я вкладываю это в другой элемент ...

Так, например, я бы поставил закругленные углы и отбрасывал тень на внешнем элементе нужного размера и переполнил: hidden; Затем поместите градиент на другой элемент внутри. 100% подходит.

возможно, не идеальное решение, но довольно простое.

...