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

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

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

Смотрите код:

.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>

Ответ 1

Я бы рекомендовал (для всех когда-либо) использовать Paul Irish technique, который выглядит следующим образом:

<!--[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-запросов, незначительного дополнительного кода для всех браузеров).

Ответ 2

Я потерял радиус углов после того, как применил 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...

и lo, круглые углы и градиент.

$2с, * -pike

Ответ 3

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

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

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