javascript - CSS3 border radius and Internet Explorer 8 - Stack Overflow

admin管理员组

文章数量:1401256

I am using CSS3 border-radius styles in my webpage and I want it to be cross-browser pliant across major browsers including IE8.

Therefore, I am trying to use the border-radius.htc file to achieve this. Wherever in my css styles the border-radius is used, i have coded something like:

   -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

Unfortunately, when I check the webpage in IE8, all the backgrounds that have border-radius behavior end up not showing at all.

The webpage is at .html

Any suggestions would be highly appreciated.

I am using CSS3 border-radius styles in my webpage and I want it to be cross-browser pliant across major browsers including IE8.

Therefore, I am trying to use the border-radius.htc file to achieve this. Wherever in my css styles the border-radius is used, i have coded something like:

   -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

Unfortunately, when I check the webpage in IE8, all the backgrounds that have border-radius behavior end up not showing at all.

The webpage is at http://www.domainandseo./portfolio/dominos/index.html

Any suggestions would be highly appreciated.

• javascript
• html
• css

Share Improve this question Follow edited Nov 8, 2012 at 6:37 Alex Zahir asked Nov 8, 2012 at 6:05 Alex ZahirAlex Zahir 96977 gold badges2121 silver badges5050 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Internet explorer versions earlier than 9 do not support this property. Check the patibility matrix. If you want rounded corners in old browsers you have to achieve them through an container carrying the rounded border image.

I don't known which "border-radius.htc" file you're using, but if you're using something like CSS3 PIE, it's a known issue. From their page:

The only way I know of to work around this is to either:

• make the target element position:relative, or
• make the ancestor element position:relative and give it a z-index.

Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:

• One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
• Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.

You might be better off trying to use a JavaScript polyfill rather than trying to load an .htc file. One that es to mind is Mike Alsup's Corner jQuery plugin, found at http://jquery.malsup./corner/. You could use conditional ments to only load it in IE 8 or earlier:

<!--[if lte IE 8]>
<script src="path_to_your_scripts_folder/jquery.corner.js"></script>
<script>
    $(function(){
        $('your_selector_here').corner('corner_radius_in_pixels');
    });
</script>
<![endif]-->

CSS3 PIE requires the path used to be relative to the HTML and not to the CSS which is different than say an image or @font-face font you're loading via CSS. You might find it works best to place the absolute URL to your PIE.htc file in your CSS.

Try this it will work:

#main{position:relative;}                            

mention this id only in IE specific stylesheets.

本文标签： javascriptCSS3 border radius and Internet Explorer 8Stack Overflow