jquery curvy corners problem not working in IE8_问答_开发者

jquery curvy corners problem not working in IE8

开发者 https://www.devze.com 2023-02-14 19:19 出处：网络

Here\'s my page: http://robynrowe.sanscode.com Take a look in IE8 and then IE7 (compat mode) and you will see the issue. The box on the right just disappears in IE8, but rounds perfectly in IE7.

Here's my page: http://robynrowe.sanscode.com

Take a look in IE8 and then IE7 (compat mode) and you will see the issue. The box on the right just disappears in IE8, but rounds perfectly in IE7.

I'm using jQuery curvy corners plugin JQuery Curvy Corners by Mike Jolley * * http://blue-anvil.com * * http://开发者_开发问答code.google.com/p/jquerycurvycorners/ *

Does anyone have an idea as to why this is happening?

Thanks

Jason

Use jQuery round corner plugin instead. I was once in your shoes and gave up on curvy corners.

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

It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.

Here's How to use it

You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here I'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <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://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Check working example at http://jsfiddle.net/VLPpk/1

The first clue that I find is that in IE8 the content of that div is not there anymore (after the jQuery processing). The div with class "border-pink box drawn" only contains another div with two other empty divs inside. Looking in the DOM you can't find the "Reward your tastebuds..." text anymore.

EDIT:

Noticed the js error too, here's a related thread http://groups.google.com/group/curvycorners/browse_thread/thread/d40ceb7c3bccec80

You need to check your filters apparently.