Question

我使用filter: progid:DXImageTransform.Microsoft.gradient获取IE＆lt; 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>

Answer 1

我建议（对所有人来说！）使用Paul Irish's 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请求，所有浏览器的额外代码都可以忽略不计）。

Answer 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，圆角和渐变。

$ 2C， * -pike

Answer 3

我发现，当IE向我提出推出圆角的问题时，我将其嵌入另一个元素......

所以例如我会把圆角和阴影放在我想要的大小的外部元素上并溢出：隐藏;然后将渐变放在内部的另一个元素上。 100％适合。

可能不是完美的解决方案，但相当简单。

IE9圆角和过滤器：progid：DXImageTransform.Microsoft.gradient

3 个答案: