JQuery的圆角在Internet Explorer（IE）搞砸了

我使用jQuery的jquery.corner.js对TD的一些标签创建圆角，他们看起来不错的IE EXCEPTJQuery的圆角在Internet Explorer（IE）搞砸了

，如果你打开新选项卡，然后回到页面
如果你转到另一个选项卡，单击一个链接，然后回到页面
如果您将鼠标悬停在执行javascript的菜单上（我认为）。

将圆角替换为水平线，并将td标签内的文本向下推。但是，页面刷新后，渲染将恢复正常。在所有情况下，它都能在Firefox中完美运行。

任何想法？

仅供参考，我使用的JavaScript代码如下（这是一个MOSS 2007页）：

$(document).ready(function(){ 
    $("table.ms-navheader td").corner("top"); 
});

下面是显示完全问题的一个样本HTML页面：

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.2.6.js"></script> 
     <script type="text/javascript" src="jquery.corner.js"></script> 
     <script type="text/javascript"> 
      <!-- 

      $(document).ready(function() 
      { 
       $("div").corner("top"); 
       $("td").corner(); 
      }); 

      //--> 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td style="background-color: blue"> 
        TD that will be messed up. 
       </td> 
      </tr> 
     </table> 
     <div style="background-color: green"> 
      divs don't get messed up. 
     </div> 
    </body> 
</html>

在上面的代码中，一旦你打开一个新的标签，TD将会变得混乱，但不是div。我对MOSS发出的HTML没有太多的控制，否则我可能会咬伤子弹，并在这里使用DIV而不是表格。

来源

2008-10-20 Ryan Shripat

有多个jquery.corner.js插件。您正在使用的链接将会很有帮助。 :) – 2008-10-21 10:17:53

我有什么，但麻烦圆角JavaScript库（尤其是IE6和7）

在我恢复了涉及图像更传统的方法结束。多一点设置，但完美的作品。

来源

2008-10-20 18:15:29 RichH

想象一下你遇到的问题有点难，链接会非常有帮助。确保您的表格的每个单元格都定义了高度和宽度属性。它可能是一个hasLayout问题。

来源

2008-10-20 18:17:07

我同意RichH，我认为当试图创建圆角时，所有流行的JavaScript库都会有所不足。

我总是发现自己使用的是cornerhop：http://wigflip.com/cornershop/，它是一个图像/ css生成器，它可以帮助您手动制作圆角边缘。

来源

2008-10-20 18:23:18 mmattax

个人而言，我很高兴他们不会添加一堆额外的图片，标签，CSS或任何需要为不支持CSS属性的浏览器创建圆角。如果不支持，我宁愿没有圆角（在大多数情况下）。 – 2010-06-18 23:45:56

你可能想试试这个插件，而不是jquery.curvycorners.js。

我们在我们的项目中使用它并没有任何问题 - 您可能需要附加/前置跨度，但它非常简单。

最好的东西 - >默认为消除锯齿。

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

来源

2008-10-21 10:05:12 penderi

这件事很棒。我也遇到了另一个插件的问题。 – 2009-07-31 22:47:50

工程真棒，但在IE8崩溃！ – 2010-09-14 03:43:48

我已经搜查，并没有发现在jQuery UI的标签解决圆角。 jquery themeroller支持圆角，但文档说它们在IE中不起作用。

下面是25种不同的圆角方法 http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

来源

2009-02-12 23:48:14

我有类似的问题，甚至在Firefox良好的页面，我发现，如果你申请“角落”到有一类设置一个元素背景颜色的角落从未得到应用。在我的情况下，我添加了一个名为'selected'的类，它为UL中选定的'选项卡'提供了不同的背景颜色。为了防止这一点，我用的js而不是CSS应用背景颜色我已经加入了弯道后：

$('.selected').css('background-color', '#3296C0');

而且它添加一个：悬停从而改变背景颜色的角平方后退上盘旋。我迄今为止的解决方案是使用onhover事件重新应用角落（您也可以在此设置颜色）。

$('#top-nav li a').hover(function(){ 
     $(this).corners('top'); 
    });

至于IE6 - 一个恶梦 - 它不会那么糟糕，如果我能发现IE6，只是不添加角落留给他们的平方。甚至没有尝试过IE 7呢...

来源

2009-06-04 12:58:03 Kris

在IE中我用DD_Roundies库有更好的效果。只能在IE中工作。对于Firefox，您需要添加-moz-border-radius样式。

来源

2009-09-18 10:28:26

curvycorners.js和jquery.curvycorners.js仅在您不想使用任何转换时才有效。

如果您有手风琴或淡入/淡出选项卡效果，则带圆角的元素在更改后无法正确呈现。

来源

2010-05-24 13:24:05 Gafroninja

使jquery弯曲的角落工作在IE只是给元素一个背景颜色。不知道为什么它是如此...只是像魔术一样工作！

来源

2011-05-15 22:04:17 Ozioma

JQuery的圆角在Internet Explorer（IE）搞砸了

回答

相关问题