Question

我正在使用jQuery来获取UI中标签的圆角。我的问题是它在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; }

Answer 1

首先，我要说你的问题是你正在编写的代码使用旧版本的Internet Explorer不支持的<canvas>标记/元素。 What you can use

为什么不使用css3 border-radius属性来设置舍入。这些仍然无法在Internet Explorer中工作，但更好，更容易编码。真的在这个时代，这种事情应该使用css3来完成。有兼容性库可以在9之前用于IE。

如果你真的想在旧的浏览器版本中使用圆角，则需要使用预先创建的图像。

编辑：正如另一个答案所述，您可以使用Internet Explorer画布库，但是您需要将getContext调用更改为以下内容，因为您的画布标记是动态生成的

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

EDIT2：现在问题是IE 7/8中也不支持css3属性。尝试使用库（建议使用其中一条评论http://css3pie.com/将该支持添加到旧版浏览器中

Answer 2

IE7 / IE8不支持canvas元素，您可以使用一个库，为其提供here支持。试一试。

Answer 3

如何做到这一点的经典方式使用背景上的divs

<div><!--top-->
  <div><!--repeat-->
    <div><!--bottom-->

    </div>
  </div>
</div>

IE 7/8中选项卡上的CSS圆角

3 个答案: