IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient
Question
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>
3 answers
solution1
14 ACCPTED 2011-04-06 19:59:57
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).
solution2
10 2012-05-12 22:01:45
I lost my corners' radius once I applied filter: progid:DXImageTransform Microsoft.gradient... . I suppose it's a similar problem.
To solve it, I used an SVG background generated here http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
It's simpler than it sounds. In CSS, it looks like
body.ie9 div.test {
border-radius:10px
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz...
and lo, round corners and gradient.
$2c, *-pike
solution3
0 2013-12-18 01:48:57
I find when IE is giving me issues with stuff pushing out of the round corners, I nest that inside another element...
So for example I would put the round corners and drop shadow on the outer element with the size I want and overflow: hidden; Then put the gradient on another element inside. 100% fit.
maybe not the perfect solution, but fairly simple.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.