IE9圆角和过滤器：progid：DXImageTransform.Microsoft.gradient [英] IE9 round corners and filter: 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>
Paul Irish的技术，其格式如下：
<！ - [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] - >
你的CSS可以写成如下： #someID {
color：lawngreen;
}
.ie6 #someID {
color：lightgoldenrodyellow;
}
.ie8 #someID，.ie9 #someID {
color：saddlebrown;
}
这是一个简单的技术，解决了很多问题（没有额外的HTTP请求，一个可忽略的额外代码为所有浏览器）。
I used filter: progid:DXImageTransform.Microsoft.gradient to get gradients for IE <9.
Now, when combined with a shadow, or a different background underneath, I get box sticking out.
Is there a way to keep backwards-compatibility, without conditionals and external stylesheets?
See code:
.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>
解决方案 I'd recommend (to everyone ever!) using Paul Irish's technique which looks like this:
<!--[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]-->
in your HTML.
Then in your CSS you can write things like:
#someID {
color:lawngreen;
}
.ie6 #someID {
color:lightgoldenrodyellow;
}
.ie8 #someID, .ie9 #someID {
color:saddlebrown;
}
to target different IEs. It's an easy technique that solves a lot of problems (no extra HTTP requests, an negligible extra code for all browsers).
这篇关于IE9圆角和过滤器：progid：DXImageTransform.Microsoft.gradient的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
