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

我想创建一个圆角效果的链接。但是，只有悬停时才会显示圆角效果。通过使用CSS3，它在Mozilla，Chrome和Safari上运行良好，但在IE中无法正常工作。如何在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>

来源

2011-04-11 Always21

在那旁边，我不得不尝试在我的css中插入像（ie-css3.htc）这样的外部文件。它使用div元素，但不适用于悬停元素。这里我的代码 .abc：hover { background-color：lightblue; -moz-border-radius：15px; -webkit-border-radius：15px; border-radius：15px; 行为：url（ie-css3.htc）;/*为IE */ } – Always21 2011-04-11 08:43:54

正如@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块。

来源

2011-04-11 08:46:47 thirtydot

+1，我什至不知道那些'.htc'解决方法存在;） – 2011-04-11 09:02:44

链接下载PIE.htc 的文件http://css3pie.com/PIE.htc 只要放在一起与乌龟HTML和CSS文件。那么你可以使用它！加油〜 – Always21 2011-04-11 09:24:42

thirtydot：谢谢你回答这个问题。其实，不知道有多少个小时，我一直在努力寻找解决这个问题的办法。最后我明白了〜千千赞赏〜^ _^ – Always21 2011-04-11 09:31:15

它只是因为圆角边框仅在IE9并没有下文实施。

来源

2011-04-11 08:42:21

但有时它可以使用像l（ie-css3.htc）这样的外部文件。 – Always21 2011-04-11 08:49:51

试试这个。它将为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; 
}

来源

2011-04-11 08:57:14 thecodeparadox

感谢您的回答。 – Always21 2011-04-11 09:32:47

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

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

到您的网页标题和它去上班，希望ISA

来源

2011-04-11 09:08:42

感谢您的回答。 – Always21 2011-04-11 09:32:22

不客气，顺便说一句：你可以通过点击评级箭头下方的真实标记将其标记为问题的答案:) – 2011-04-11 09:56:11

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

回答

相关问题