如何让边框半径和渐变背景在 IE 9 中协同工作答案

【问题标题】：How to get border radius and gradient background working together in IE 9如何让边框半径和渐变背景在 IE 9 中协同工作
【发布时间】：2013-10-06 04:12:06
【问题描述】：

我使用 css 创建按钮样式，但在 IE9 上出现问题，它在 Firefox 上运行良好

代码：

 .my_box {
    -moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
    box-shadow:inset 0px 1px 0px 0px #f9eca0;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
    background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
    background-color:#f0c911;
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #e65f44;
    display:inline-block;
    color:#c92200;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ded17c;
}

见FIDDLE

如何让它在 IE9 上运行？

请 JSfiddle 回答

【问题讨论】：

见stackoverflow.com/questions/5381446/ie9-border-radius
检查您是否已将DOCTYPE 设置为html stackoverflow.com/questions/5381446/ie9-border-radius
撇开IE9问题不谈，我认为你的linear-gradient() syntax是outdated。

标签： html internet-explorer-9 css

【解决方案1】：

不用过滤器试试

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');

这可以覆盖样式。

Fiddle

【讨论】：

【解决方案2】：

给元素一个容器，带有边框半径，并将容器的溢出设置为隐藏，同时给这个元素一个边框：

HTML

<div class='rounded'>
    <a href="#" class="my_box">TEXT</a>
</div>

CSS

.rounded{
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    overflow:hidden;
    display:inline-block;
    border:1px solid #e65f44;
}

JSFiddle

在 IE 9 中经过试验和测试

【讨论】：

【解决方案3】：

CSS 边框半径将通过将其添加到您的页眉来工作，

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

确保它位于 HTML 文档的顶部

<!DOCTYPE html>

【讨论】：

【解决方案4】：

试试这个：

-webkit-border-top-right-radius: 36px;
-webkit-border-bottom-left-radius: 36px;
-moz-border-radius-topright: 36px;
-moz-border-radius-bottomleft: 36px;
border-top-right-radius: 36px;
border-bottom-left-radius: 36px;

您可以通过border-radius.com创建边框半径

【讨论】：

【解决方案5】：

你可以使用这个http://css3pie.com/ 它适用于 IE 6-9

【讨论】：

【解决方案6】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

【讨论】：