如何实现“圆角效应上的圆角”在IE？ [英] How to implement "Rounded Corner on hover effect" in IE?

问题描述

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

解决方案

正如@Michael Rose所说，IE8和更低的不支持CSS3圆角。

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

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

请参阅我写的另一个相关答案：

.htc文件在IE的旧版本中是一个很好的做法，如CSS3的圆角？

---

编辑以回应您编辑的评论：我合理地确定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; 
} 
  

为了使它工作，我移动了 / code>块而不是 .abc：hover 块的


I want to create a link with the rounded corner effect. However, the rounded corner effect will show while hover only. By using CSS3, it's working fine on mozilla, chrome and Safari, but not in IE.

Here my 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;
}

Here my html

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

解决方案

As @Michael Rose says, IE8 and lower simply do not support CSS3 rounded corners.

There are a variety of workarounds to apply rounded corners in these versions of IE.

To my knowledge, the best of these workarounds is CSS3 PIE.

See another relevant answer I wrote:

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

---

Edit in response to your edited comment: I'm reasonably sure CSS3 PIE supports :hover properly.

---

Edit 2:

I just tried it, this CSS works:

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;
}

To make it work, I moved the behavior property to the a block instead of the .abc:hover block.

这篇关于如何实现“圆角效应上的圆角”在IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！