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

【问题标题】：CSS rounded corner on tabs in IE 7/8IE 7/8 中选项卡上的 CSS 圆角
【发布时间】：2012-08-19 15:20:31
【问题描述】：

我正在使用 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; }

【问题讨论】：

你有什么理由使用 jQuery 和
是的，使用 CSS，如果您必须支持 IE 6-8，请考虑使用 CSS3 PIE - css3pie.com。
我现在使用 css，我在使用 Ie7/8 时遇到了同样的问题。
糟糕，当你完全改变了问题的上下文时，你不应该编辑整个问题
@secret...对此感到抱歉..我现在需要快速修复，所以当我读到 7/8 不支持画布时，我尝试了差异选项。

标签： javascript html css internet-explorer rounded-corners

【解决方案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 属性。尝试使用库（推荐的 cmets 之一 http://css3pie.com/ 将该支持添加到旧版浏览器中

【讨论】：

【解决方案2】：

IE7/IE8 不支持 canvas 元素，你可以使用一个库来支持它，找到here。试试看吧。

【讨论】：

【解决方案3】：

经典的做法呢？在 div 层上使用背景

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

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

【讨论】：