Question

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

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

据我所知，这些解决方法中最好的是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块而不是.abc:hover块。

Answer 2

这只是因为圆形边框仅在IE9中实现，而不是在下面。

Answer 3

您可以检查与IE9的兼容性，只需添加

即可

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

到你的页面标题，它会起作用，希望isA

Answer 4

试试这个。它适用于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;
}

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

4 个答案: