如何在 IE 9 中制作带圆角的按钮？答案

【问题标题】：How to make buttons with rounded corner in IE 9?如何在 IE 9 中制作带圆角的按钮？
【发布时间】：2013-02-06 11:15:35
【问题描述】：

.button_style
{
    color:#FFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    background: #2faa51;
    background: -moz-linear-gradient(top, #2faa51 0%, #207337 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2faa51), color-stop(100%, #207337));
    background: -webkit-linear-gradient(top, #2faa51 0%, #207337 100%);
    background: -o-linear-gradient(top, #2faa51 0%, #207337 100%);
    background: -ms-linear-gradient(top, #2faa51 0%, #207337 100%);
    background: linear-gradient(to bottom, #2faa51 0%, #207337 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2faa51', endColorstr='#207337', GradientType=0 );
    border:1px solid #178636;
    padding:0px 5px;
    white-space:nowrap;
    font-size:13px !important;
    line-height:20px;
    font-weight:bold;
    -webkit-border-top-left-radius:15px;
    -webkit-border-bottom-left-radius:15px;
    -webkit-border-bottom-right-radius:15px;
    behavior: url(images/ie-css3.htc); 
    border-radius: 15px 15px 15px 15px;

}

尝试了 ie-css3 和上面的 CSS，但只能找到雕刻的圆角（轮廓）但没有圆角。边缘仍然是尖角。如何从所有四个侧面使它成为圆角按钮。请帮助我这个。

【问题讨论】：

border-radius 在 IE9 上支持 OOTB（以及在所有其他浏览器中）没有供应商前缀（所以删除所有这些 -webkit-border-*-radius ;）
@ByScripts：但早期版本的 Chrome 和 Safari 使用前缀属性。此外，Firefox 使用与标准不同的值。
查看link
@TomSarduy Chrome 和 Safari 自 v5.0 起停止使用前缀（相当旧，几乎不再使用）。您所说的“ Firefox 使用与标准不同的值”是什么意思？没听说过这个。
@ByScripts：你说得对，我很困惑。 Firefox 对其他属性使用不同的值，例如 gradient

标签： css internet-explorer-9

【解决方案1】：

IE 不需要前缀：

border-radius: 15px 15px 15px 15px;

对于 IE9，重要的步骤是使用边缘 META 标记（在标题中）：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

“edge”表示“使用最新的渲染引擎”，所以 IE 9 使用 9，10 使用 10，等等。

并提供行为技巧：

behavior: url(images/ie-css3.htc);

【讨论】：