IE 7/8中選項卡上的CSS圓角

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>標簽/元素。 你可以用什么

為什么不使用css3 border-radius屬性來設置舍入。 這些仍然無法在Internet Explorer中工作，但更好，更容易編碼。 真的在這個時代，這種事情應該使用css3來完成。 有兼容性庫可以在9之前用於IE。

如果您真的想在舊瀏覽器版本中使用圓角，則需要使用預先創建的圖像。

編輯：正如另一個答案所述，您可以使用Internet Explorer畫布庫，但是您需要將getContext調用更改為以下內容，因為您的canvas標簽是動態生成的

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元素，您可以使用一個庫，在此處提供支持。 試一試。

Answer 3

怎么樣的經典方式使用背景上的divs

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

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