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

Question

I am using jQuery to get the rounded corner for tabs in UI. My issue is it works well in firefox and Ie9 but fails in IE7 and IE8(tab looks like a square. Is it an issue to everyone or is there a fix?

<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>

and css is,

#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

To start i'd say your problem is that the code you are writing uses the <canvas> tag/element which older versions of internet explorer don't support. What you can use

Why not just use css3 border-radius properties to set up your rounding. These still won't work in internet explorer but are nicer and easier to code. Really in this day and age this sort of thing should be done using css3 . There are compatibility libraries that will work for IE's before 9.

If you really want your rounded corners in the old browser versions you are going to need to use a pre created image.

EDIT: As the other answer stated you can use the internet explorer canvas library,but you will need to change you getContext call to the following as your canvas tag is dynamically generated

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

EDIT2: Now your problem is that the css3 properties are also not supported in IE 7/8. Try using a library (one of the comments recommended http://css3pie.com/ to add that support into the older browsers

Answer 2

The canvas element is not supported in IE7/IE8, you can use a library that gives it support found here . Give that a try.

Answer 3

what about classic way of doing it using backgrounds on lays of divs

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

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