< a>上的边界半径错误在IE9 [英] Border-radius bug on <a> in IE9

问题描述

查看< div> 元素正确渲染border / border-radius，但任何< a> 或具有背景，边框和边框半径设置的< button> 将背景颜色或图像显示为正方形，只有边框为圆形。尝试设置< a> & < button> 到 display：block 或 display：inline-block



这里是一个链接到Webkit的计算样式： https://gist.github.com/773719

这里是来自IE9开发工具的计算风格：

更新
使用过滤器:;或-ms-filter :;属性在IE中有渐变，使得背景脱离定义的border-radius。

解决方案

解决方案是嵌套渐变在另一个元素内与边界半径和一个重叠。
这是不太理想，但它的所有css。

除此之外，使用背景图片的效果非常好。

 < div class =corner> 
< div class =grad>按钮< / 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; / *旧浏览器* / 
 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），色停（100％，＃6CA501））; / * webkit * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃b1cc00'，endColorstr ='＃518e00'，GradientType = 0）; / * ie * / 
} 
< / style> 
  

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.

解决方案

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>

这篇关于< a>上的边界半径错误在IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！