Border-radius bug on in IE9

Question

Seeing that

elements render border/border-radius correctly, but any or that has a background, border

相关标签:

Answer 1

Running in to this as well. The 'filter' based gradient isn't actually a background image as it is with CSS3 gradients it's an extra layer. The IE team obviously hasn't gotten round to clipping these filter layers to the rounded corners. Strange because it's pretty obvious that folks are going to be making buttons like this.

Mapping legacy features against the new ones must be pain. It could be better for them to just implement gradients in CSS. I'd rather add a prefix than add legacy filters.

Answer 2

I'm using Ultimate CSS Gradient Generator. It recommended to use this code to disable filter in IE9:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

This should solve your problem.

Answer 3

I've found this excellent blog posting that shows how you can use SVG gradient sprites to fix this particular issue: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Answer 4

The solution is to nest the the gradient inside another element with the border radius AND an overlflow. This is less than ideal, but its all css. no hacks.

Outside of this, using a background image works pretty well for ie.

<div class="corner">
   <div class="grad">button</div>
</div>


<style>
.corner,
.grad{
   height:50px;
   width:250px;
   }
.corner{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
   }
.grad{
   border:1px #659300 solid;
   background: #659300; /* old browsers */
   background: -moz-linear-gradient(top, #659300 0%, #6F9B00 50%, #528200 51%, #6CA501 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659300), color-stop(50%,#6F9B00), color-stop(51%,#528200), color-stop(100%,#6CA501)); /* webkit */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1cc00', endColorstr='#518e00',GradientType=0 ); /* ie */
   }
</style>

Answer 5

One solution for this is to use CurvyCorners, a javascript solution. It works all the way back to IE6, but struggles with gradiated backgrounds. If you are using a block coloured background however it will work fine, and has handled all border types I've thown at it so far. The website says you need to call it, but somehow I've found it seems to work simply by including the .js and using css3 border-radius attributes in the css.