1

我想要 IE7 和 IE8 中的圆角支持。我为此使用了border-radius.htc 文件。它适用于所有具有相同边框半径的角，但如果我更改任何角的边框半径，它就不起作用。我的代码是：

<!DOCTYPE html>
<html>
<head>
<title>Border Radius for IE7+</title>
<style>
.borderRadius{
    background-color: #f0f0f0;
    width: 300px;
    height: 50px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #d7d7d7;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    behavior: url(border-radius.htc);
}
</style>
</head>
<body>
    <div class="borderRadius">
        Content in Div.
    </div>
</body>
</html>

这工作正常。但是如果我将样式更改为

<style>
.borderRadius{
    background-color: #f0f0f0;
    width: 300px;
    height: 50px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #d7d7d7;
    border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    -moz-border-radius:10px 10px 0px 0px;
    behavior: url(border-radius.htc);
}
</style>

它使所有圆角保持相同的半径。请帮我解决这个问题。

4

2 回答 2

1

可能是border-radius.htc 脚本有错误或者不能为每个角设置不同的半径。

我建议尝试替代脚本；有几个，但最好的一个（很长一段时间）是CSS3Pie——它比任何其他类似的脚本都有更多的功能，它的性能更好，并且经过了很好的测试，因此可能有更少的错误和怪癖。它也是我所知道的唯一一个仍在积极开发中的。我强烈推荐它。

从理论上讲，这应该是一个简单的案例，将现有的交换behavior()为引用 PIE.htc 文件，然后从那里开始工作。

对于不同的边界半径，它绝对应该与您的代码一起使用：

border-radius:10px 10px 0px 0px;

希望有帮助。

于 2013-07-16T20:19:37.310 回答
0

试试这个：http: //jsfiddle.net/jplahn/62ESq/

我大大夸大了半径，以便您可以看到它正在工作，但请试一试。

CSS：

.borderRadius{
    background-color: #f0f0f0;
    width: 300px;
    height: 50px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #d7d7d7;

    -webkit-border-top-left-radius:100px;
    -webkit-border-top-right-radius:100px;
    -webkit-border-bottom-left-radius:25px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius:10px 10px 0px 0px;
     behavior: url(border-radius.htc);
}
于 2013-07-16T19:51:39.557 回答