如何在IE中实现"悬停效果的圆角"?

Alw*_*s21 2 html javascript css rounded-corners css3

我想创建一个带圆角效果的链接.但是,圆角效果仅在悬停时显示.通过使用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;
}
Run Code Online (Sandbox Code Playgroud)

在这里我的HTML

<a href="#" class="abc">Button</a>
Run Code Online (Sandbox Code Playgroud)

thi*_*dot 7

正如@Michael Rose所说,IE8及更低版本根本不支持CSS3圆角.

在这些IE版本中应用圆角有多种变通方法.

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

看到我写的另一个相关答案:

对于像CSS3这样的圆角,.htc文件在旧版IE中是一个很好的做法吗?


编辑以回应您编辑的评论:我有理由相信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;
}
Run Code Online (Sandbox Code Playgroud)

为了使它工作,我将behavior属性移动到a块而不是.abc:hover块.