IE8的弧形边框CSS
我需要IE8和所有主流浏览器的弧形边框CSS。目前我正在尝试使用CSS PIEIE8的弧形边框CSS
jsfiddle演示是here。但我会建议回答者从here下载PIE.htc文件,并尝试将HTML作为独立页面在IE8中获得真正的效果。
我的问题是<td>
包含“感谢您注册”文本是不是弯曲在jsfiddle中的IE8。如果我将它作为HTML页面运行,它在IE8中弯曲,但蓝色背景与“谢谢注册”<td>
(但其背景为“#f2f2f2”)重叠。
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
<tr>
<td> </td>
<td style="width: 60%; text-align: center;background: #0067C8;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
<img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
</td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
<tr>
<td style="width:3%;"> </td>
<td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
Thank you for registering
</td>
<td style="width:3%;"> </td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
你有没有试过,http://jquery.malsup.com/corner/ jquery插件添加曲线?
$(function() {
$('table table tr:eq(2) td:eq(1)').corner();
});
添加
position:relative; z-index: 0;
,它是一个电子邮件模板实际。但是+1,因为你是正确的。我需要一个基于CSS的解决方案。你可以试一次吗? – tusar 2012-04-10 07:20:19
不幸的是,没有可用于所有主流浏览器的CSS解决方案。如果说用JS解决方案或者不认为这种浏览器不支持角落,那将是非常棘手的。 – codef0rmer 2012-04-10 11:47:43
尽量我不使用jQuery与独立的页面由Using CSS3Pie htc for border-radius in IE8
+1是正确的!但我已经接受了类似的答案:) – tusar 2012-04-10 07:46:15
你摇滚@Exor!找到了 ! '位置:相对; z-index:0;'在外部(有背景颜色)做了诀窍! – tusar 2012-04-10 07:42:17