如何在 IE 中实现“圆角悬停效果”？答案

【问题标题】：How to implement "Rounded Corner on hover effect" in IE?如何在 IE 中实现“圆角悬停效果”？
【发布时间】：2011-08-02 21:21:49
【问题描述】：

我想创建一个带有圆角效果的链接。但是，圆角效果只会在悬停时显示。通过使用 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>

【问题讨论】：

除此之外，我还尝试在我的 css 中插入外部文件，例如 (ie-css3.htc)。它适用于 div 元素，但不适用于悬停元素。这是我的代码 .abc:hover { background-color: lightblue; -moz-边界半径：15px； -webkit-border-radius：15px；边框半径：15px；行为：url(ie-css3.htc); /*对于 IE*/ }

标签： javascript html css rounded-corners

【解决方案1】：

只是因为圆角边框只在IE9中实现，在IE9以下没有实现。

【讨论】：

但是..有时它可以与 l(ie-css3.htc) 等外部文件一起使用。

【解决方案2】：

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

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

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

编辑以响应您编辑的评论：我有理由确定 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 块而不是 .abc:hover 块。

【讨论】：

链接下载PIE.htc文件css3pie.com/PIE.htc 把你的html和css文件放在一起。那么你就可以使用它了！加油~
三十点：感谢您回答这个问题。实际上，不知道多少个小时，我一直在锻炼以找到解决此问题的方法。终于明白了~万千感谢~^_^
不用担心。我了解到 CSS3 PIE 确实可以与 :hover 一起使用，我还没有尝试过。

【解决方案3】：

试试这个。它适用于 IE9

<div class="rounded" style="background:#ddd"></div>

.rounded {
  height: 100px;
  width: 100px;
  margin-right: 20px;
  padding: 5px;
  border:2px solid #404040;
  border-radius: 5px;
}

【讨论】：

【解决方案4】：

你可能会检查与IE9的兼容性，只需添加

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

到你的页面标题，它会工作，希望是A

【讨论】：

不客气，顺便说一句：您可以通过点击评分箭头下方的真实标记将其标记为问题的答案 :)