Question

我正在使用JQuery的jquery.corner.js在某些td标签上创建圆角，它们在IE中看起来很好

如果您打开新标签页然后返回页面
如果您转到其他标签，请点击链接，然后返回页面
如果你将鼠标悬停在执行javascript的div /菜单上（我认为）。

圆角用水平线代替，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而不是表格。

Answer 1

在IE中，我使用 DD_Roundies 库获得了更好的结果。仅适用于IE浏览器。对于Firefox，您需要添加-moz-border-radius styles。

Answer 2

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

我总是发现自己使用的是角落：http://wigflip.com/cornershop/，它是一个图像/ css生成器，可以消除手动制作圆角的痛苦。

Answer 3

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

我们在我们的项目中使用它完全没有问题 - 你可能需要附加/ prepend with span，但它非常简单。

最好的事情 - ＆gt;默认情况下消除锯齿。

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

Answer 4

我只有麻烦的圆角Javascript库（特别是IE6和7）

最后，我回归到涉及图像的更传统的方法。设置更多的苦差事，但效果很好。

Answer 5

只有当你不想使用任何过渡时，

curvycorners.js和jquery.curvycorners.js才有效。

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

Answer 6

使IE中的jquery弯曲角落工作只需给元素一个背景颜色。不知道为什么会这样......就像魔法一样！

Answer 7

要想象您所遇到的问题有点困难，链接会非常有用。确保为表的每个单元格定义高度和宽度属性。它可能是一个hasLayout问题。

Answer 8

我已经搜索过，但在jquery UI标签中找不到圆角的解决方案。 jquery themeroller支持圆角，但文档说它们在IE中不起作用。

这是一个包含25种不同圆角方法的好页面 http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Answer 9

我有类似的问题，即使在firefox中，我发现如果你将'corner'应用于一个具有设置背景颜色的类的元素，则角落永远不会被应用。在我的例子中，我添加了一个名为“selected”的类，它为UL中选定的“tab”提供了不同的背景颜色。为了防止这种情况，我在添加角落后使用js而不是css应用背景颜色：

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

此外，你还添加了一个：悬停，它可以改变背景颜色，在悬停时角落平方。到目前为止我的解决方案是使用onhover事件重新应用角落（你也可以在这里设置颜色）。

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

对于IE6来说 - 一场噩梦 - 如果我能够检测到IE6并且不添加角落而使它们平方就不会那么糟糕。甚至还没试过IE 7 ......

Internet Explorer（IE）中的JQuery Rounded Corners搞砸了

9 个答案: