javascript - 如何在IE中实现 "Rounded Corner on hover effect"？

Question

我想创建一个带有圆 Angular 效果的链接。但是，圆 Angular 效果只会在悬停时显示。通过使用 CSS3，它在 mozilla、chrome 和 Safari 上运行良好，但在 IE 上运行不佳。

这是我的CSS

a {
color: black; background-color:#ddd;
text-align: center;font-weight: bold;
width:110px; height:25px;
padding: 10px; text-decoration:none;
}

.abc:hover {
background-color: lightblue;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}

这是我的html

<a href="#" class="abc">Button</a>

Answer 1

正如@Michael Rose 所说，IE8 和更低版本根本不支持 CSS3 圆 Angular 。

有多种解决方法可以在这些版本的 IE 中应用圆 Angular 。

据我所知，这些解决方法中最好的是 CSS3 PIE .

看我写的另一个相关回答:

Is .htc file a good practice in older versions of IE for rounded corners like CSS3 has?

---

根据您编辑的评论进行编辑:我有理由相信 CSS3 PIE 正确支持 :hover。

---

编辑 2:

我刚刚试过了，这个 CSS 有效:

a {
    color: black; background-color:#ddd;
    text-align: center;font-weight: bold;
    width:110px; height:25px;
    padding: 10px; text-decoration:none;
    behavior: url(PIE.htc);
}

.abc:hover {
    background-color: lightblue;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}

为了让它工作，我将 behavior 属性移到了 a block 而不是 .abc:hover block 。