Question

我想在IE7＆amp; 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>

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

Answer 1

border-radius.htc脚本可能存在错误，或者不能为每个角落提供不同的半径。

我建议尝试另一种脚本;有几个，但最好的一个（很长的路）是CSS3Pie - 它比任何其他类似的脚本有更多的很多，它表现更好，并且经过充分测试，所以可能有更少的错误和怪癖。它也是我所知道的唯一一个仍处于积极发展阶段的人。我强烈推荐它。

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

对于不同的边界半径，它肯定适用于您的代码：

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

希望有所帮助。

Answer 2

试试这个： 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);
}

IE7 +中的边界半径

2 个答案: