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)
正如@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块.
| 归档时间: |
|
| 查看次数: |
5388 次 |
| 最近记录: |