jquery弯曲的角落问题在IE8中无效

时间:2011-03-02 06:32:24

标签: javascript jquery html css curvycorners

这是我的页面: http://robynrowe.sanscode.com

看看IE8然后IE7(compat模式),你会看到问题。右边的方框在IE8中消失,但在IE7中完美地完成。

我正在使用jQuery曲线角落插件 Mike Jolley的JQuery Curvy Corners *  * http://blue-anvil.com *  * http://code.google.com/p/jquerycurvycorners/ *

有没有人知道为什么会这样?

由于

杰森

2 个答案:

答案 0 :(得分:5)

使用jQuery圆角插件代替。我曾经穿过你的鞋子,放弃弯曲的角落。

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

所有浏览器都支持IE,包括IE。它使用嵌套的div(没有图像)在IE中绘制角落。它还支持浏览器中的原生边界半径舍入(Opera 10.5 +,Firefox,Safari和Chrome)。因此,在这些浏览器中,插件只是设置了一个css属性。

以下是如何使用

您需要在</body>之前包含jQuery和Corner js脚本。然后编写你的jQuery,如$('div,p')。corner('10px');放在''之前。所以你的HTML看起来像下面的代码。在这里,我正在为所有divp标记制作圆角。如果您想针对特定的ID或类进行操作,那么您可以执行$('#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>

检查http://jsfiddle.net/VLPpk/1

处的工作示例

答案 1 :(得分:0)

我发现的第一个线索是,在IE8中,该div的内容不再存在(在jQuery处理之后)。带有“border-pink box drawn”类的div只包含另一个div,里面还有另外两个空div。在DOM中找不到“Reward your tastebuds ...”文本了。

编辑:

注意到js错误,这是一个相关的线程http://groups.google.com/group/curvycorners/browse_thread/thread/d40ceb7c3bccec80

您需要明确检查过滤器。