Border-radius bug on <a> in IE9

问题

Seeing that <div> elements render border/border-radius correctly, but any <a> or <button> that has a background, border and border-radius set shows the background color or image as a square, and only the border is round. Tried setting <a> & <button> to display: block or display: inline-block but that didn't work.

Is there a known workaround?

Here is a link to the computed style from Webkit: https://gist.github.com/773719

Here is the computed style from IE9 dev tools:

Update Using the filter:; or -ms-filter:; property to have gradients in IE make the background break out of the defined border-radius.

回答1:

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/

回答2:

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>

回答3:

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.

回答4:

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.

回答5:

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.

来源：https://stackoverflow.com/questions/4652793/border-radius-bug-on-a-in-ie9