Border Radius for IE8

问题

I have a problem with border radius on IE8, till now I used pie.js but I don't recommend this js library because is buggy. If you have a small site with not many html pages, it is more than ok to use that library, but if you have a heavy application in which many different frameworks are used, then is impossible to use that. Same behavior for CurvyCorners or other mega libraries.

So if anyone can help me with a small jQuery or javascript plugin to do just border-radius on IE 8 I'll be grateful for life.

回答1:

Try this:

requires:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>

Javascript:

$('.box').corner();

HTML:

<div class="box">Hello</div>

CSS:

box{
  width:150px;
  height:28px;
  padding:10px;
}

more examples: http://jquery.malsup.com/corner/

回答2:

Short of using the libraries that you described in your question, I don't think you can do curved corners in IE8.

If you really wanted them, you could probably use an image to give the curved corner effect, at the cost of increased bandwidth and messy code.

回答3:

According to Microsoft:

Other Rounded Corners Solutions

We would like to point out the abundance of alternate solutions available on the Web. In addition to individual rounded corners solutions, there are also sites with frequently updated lists of rounded corners solutions that are compatible with multiple versions of Internet Explorer and other browsers.

Listed here are a few of our favorite sites for aggregated rounded corners solutions. They are presented in no particular order, and the inclusion of any link does not imply endorsement by Microsoft of the site.

• CSS-Discuss Wiki, RoundedCorners: http://css-discuss.incutio.com/?page=RoundedCorners

• SmileyCat, CSS Rounded Corners "Roundup": http://www.smileycat.com/miaow/archives/000044.php

• CSS Juice, 25 Rounded Corners Techniques with CSS: http://www.cssjuice.com/25-rounded-corners- techniques-with-css/

回答4:

Check out this post: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

It covers specifically rounded corners and box shadow in IE7/8.

and also below with so many examples

http://blue-anvil.com/jquerycurvycorners/test.html

回答5:

I have used the border-radius.htc in the past.

The only pain is that the CSS Urls are relative to the CSS file. HTC are relative to the page.

you can download the demo here.

回答6:

Why don't you use css' :before and :after pseudo classes to add curved corners.

Your comment on Tom Will's answer suggested that you have a lot of form inputs right?

Well I assume that they will be mostly uniform in width.

Just create some classes like curved-std-width, curved-lge-width, curved-sml-width and then you can do this in your CSS:

.curved-std-width:before {
  height: 5px;
  background: url('curved-top-5px.png');
}

.curved-std-width:after {
  height: 5px;
  background: url('curved-bottom-5px.png');
}

Something like that should work pretty well without you having to go and add endless html before and after form inputs.

Otherwise you can probably do it using jQuery as well:

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');

And then style appropriately.

回答7:

Why don't you use jQuery's corner plugin?

You can easily apply corners to any element with a specific classname or ID; for example:

$("#box1").corner();

It also allows you to decorate or modify the type of corner effect you want adorning your elements.

You can also use other JavaScript solutions like CurvyCorners or even some CSS solutions. Another option is to use JavaScript to wrap <div> elements your form inputs and use CSS's background-image to emulate the look of rounded corners. For instructions on this last solution, see this tutorial.

回答8:

This is ugly but might work if you know beforehand the background color of the input fields (which can be a problem with submit buttons): http://jsfiddle.net/563c5/1/

I have no idea how it will behave when rendering lots of input fields in an average computer.

IE8 supports inline CSS images, and you need only 1 small image for all four rounded corners. Any solution relying on corner images may actually require just a few extra bytes of bandwidth.

回答9:

I would recommend giving Modernizr a go, the great thing about it is you can use it to substitute most (if not all) unsupported CSS3 in older browsers. I have used it on a number of large web apps without any dramas.

You can also look at the jQuery UI library that I believe has some rounded corners scripts.

I hope this helps... good luck!

回答10:

you should use the alternate pie.htc, its similar thing but less buggy, and either way i don't recommend it.

Heavy use of css3 elements on these non css3 comply browsers, don't perform good, chances is that their system are not up to date too causing them extremely laggy. So it is good for them to degradation to a normal corner.

If you really want it to look good on ie, you best of using image sprite backgrounds, or you going to change to drive away a number of your visitors for lagging issues.

回答11:

Not sure if it was covered by previous contributors, but I used mainly dd_roundies library, and for rounded corners alone it worked ok. Mixing corners with IE filters usually was too much to ask though.

回答12:

Have you tried this: http://jquery.malsup.com/corner/

回答13:

Use this : http://css3pie.com/

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Supported CSS3 Features

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

回答14:

You can use image with round corner to border a div. Example:

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

Or you make some magic like:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

回答15:

Just another JavaScript-based solution: Nifty Corners Cube. It is released as GNU GPL and doesn't need jQuery.

回答16:

Use this code to get rounded corner in IE 6+

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script>
<script>
    $('#logo-navsection').corner( function() {
        $("this").css("border-top", "0px 0px opx 10px")                
    });
</script>

来源：https://stackoverflow.com/questions/9426979/border-radius-for-ie8