我正在使用 jQuery 为 UI 中的选项卡获取圆 Angular 。我的问题是它在 firefox 和 Ie9 中运行良好但在 IE7 和 IE8 中失败(选项卡看起来像一个正方形。这对每个人来说都是一个问题还是有修复?
<div id="fig">
<div id="fig-tabs">
<strong class="tab-current">1st tab</strong> <a href="" class="tab">2nd tab</a> <a href="" class="tab">3rd tab</a>
</div>
...</div>
css 是
#fig-tabs { }
strong.tab-current
{
background-color: #FFF;
padding: 3px 8px 7px 8px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
text-decoration: none;
}
a.tab
{
background-color: #999;
padding: 3px 8px 2px 8px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
text-decoration: none;
}
a.tab:hover { background-color: #9ffff; }
最佳答案
首先我会说你的问题是你正在编写的代码使用了 <canvas>
旧版本的 Internet Explorer 不支持的标记/元素。 What you can use
为什么不直接使用 css3 border-radius
设置舍入的属性。这些仍然不能在 Internet Explorer 中工作,但更好,更容易编码。真的在这个时代,这种事情应该使用 css3
来完成。 .有适用于 9 之前的 IE 的兼容性库。
如果您真的想要旧版浏览器中的圆 Angular ,您将需要使用预先创建的图像。
编辑:正如其他答案所述,您可以使用 Internet Explorer Canvas 库,但您需要进行更改 getContext
在动态生成 Canvas 标签时调用以下内容
var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');
EDIT2:现在您的问题是 IE 7/8 也不支持 css3 属性。尝试使用库(推荐的评论之一 http://css3pie.com/ 将该支持添加到旧浏览器中
关于javascript - IE 7/8 中选项卡上的 CSS 圆 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12102985/