HTML圆角在Internet Explorer中的实现

Question

HTML圆角在Internet Explorer中的实现

3

我想知道如何实现像这个网站上某些地方那样的圆角效果。我已经搜索了很多代码，但不知道该使用哪一个。

-moz-border-radius:10px;

-webkit-border-radius:10px;

behavior:url(border-radius.htc);

我应该使用哪一个？为什么在Internet Explorer上无法正常工作？

- user839935

4个回答

2

Internet Explorer 6-8不支持css3，这就是为什么border-radius在这些浏览器中无法工作。

对于Internet Explorer 9，您可以使用（未加前缀的）border-radius属性来实现圆角效果 (http://ie.microsoft.com/testdrive/HTML5/BorderRadius/)

对于旧版基于webkit的浏览器，您需要使用前缀 -webkit。
对于旧版基于mozilla的浏览器，您需要使用前缀 -moz。
对于旧版Opera浏览器，您需要使用前缀 -o。
对于其他浏览器，您可以只使用一个border-radius属性而不需要任何前缀。

您的跨浏览器代码必须像下面的代码一样：

{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

对于IE6-8版本，您需要使用像http://css3pie.com/这样的js插件。

- Ilia Sachev

1

Opera从未支持过-o-border-radius。 - duri

1

我强烈推荐CSS3PIE。在某些情况下，它可能会在不透明度等方面出现一些问题，但对于绝大多数网站来说，它可以大大缩短完成切片所需的时间。

只需在CSS3声明的末尾添加behaviour:url(/pie.htc);，IE就能完全支持box-shadow、border-radius和linear gradients。

- Sam Becker

-2

哇，有很多重复的，但还好。这是从jQuery UI中获取的代码。这些是CSS语句，您需要在<style></style>之间添加它们或将其放入CSS样式表中，并将它们链接到您的HTML文件。每个语句都会向特定区域（顶部，底部，左上角，右上角，全部...）添加角。

您可以随时修改半径以使它们更弯曲...

.ui-corner-tl { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-tr { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-br { -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-top { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-right {  -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-left { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-all { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -ms-border-radius:8px; }

我相信这是跨浏览器的，但旧版本的Internet Explorer可能无法使用它

- Dany Khalife

太酷了，这非常有用，我会试一下！谢谢大家的快速回复 xD - user839935

是的，我正要在他的回答中评论并给他点赞 :) - Dany Khalife

我不知道你在jquery中找到了ms前缀，但是http://blog.danielfriesen.name/2011/01/05/css3-border-radius-and-vendor-prefix-fud/声称从来没有“-ms-border-radius”，而http://bugs.jqueryui.com/ticket/4972似乎也是这样认为的。 - Nickolay

你看到我在Rob的回答中留言了吗？可能还没有！ - Dany Khalife

@DanyKhalife：你从另一个答案中复制并不意味着它是正确的，这是我评论的主要观点。抱歉我的前言有些尖刻。 - Nickolay

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

这些 -moz-，-o-，-webkit- 前缀是为了支持旧版本的浏览器。然而，与普遍认为相反，-ms- 前缀不适用于 border-radius 属性。当 IE 开始支持 border-radius，即在 9 版本中时，使用无厂商前缀的 border-radius 属性。^链接

-moz-border-radius: 10px;    /* Gecko, Firefox */
-webkit-border-radius: 10px; /* Safari, chrome */
-o-border-radius?: 10px;     /* Opera */
border-radius: 10px;         /* Modern browsers*/