7

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

  1. 如果您打开一个新标签，然后返回该页面
  2. 如果您转到另一个选项卡，请单击一个链接，然后返回该页面
  3. 如果您将鼠标悬停在执行 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 而不是表格。

4

9 回答 9

5

在 IE 中，我使用DD_Roundies库获得了更好的结果。不过只能在 IE 中使用。对于 Firefox，您需要添加 -moz-border-radius 样式。

于 2009-09-18T10:28:26.800 回答
4

我同意 RichH 的观点，我认为所有流行的 JavaScript 库在尝试创建圆角时都有一些不足之处。

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

于 2008-10-20T18:23:18.360 回答
3

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

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

最好的事情-> 默认情况下抗锯齿。

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

于 2008-10-21T10:05:12.033 回答
2

我在圆角 Javascript 库（尤其是 IE6 和 7）方面遇到了麻烦

最后，我回到了涉及图像的更传统的方法。设置起来有点麻烦，但效果很好。

于 2008-10-20T18:15:29.500 回答
2

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

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

于 2010-05-24T13:24:05.843 回答
1

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

于 2011-05-15T22:04:17.797 回答
0

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

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

此外，您还添加了一个 :hover 来更改背景颜色，这些角在悬停时会变回方形。到目前为止，我的解决方案是使用重新应用角的 onhover 事件（您也可以在此处设置颜色）。

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

至于 IE6 - 一场噩梦 - 如果我能检测到 IE6 而只是不添加让它们成正方形的角，那就不会那么糟糕了。甚至还没有尝试过 IE 7 ......

于 2009-06-04T12:58:03.507 回答
0

想象你遇到的问题有点困难，一个链接真的很有帮助。确保为表格的每个单元格定义了高度和宽度属性。这可能是一个 hasLayout 问题。

于 2008-10-20T18:17:07.517 回答
0

我已经搜索并没有找到 jquery UI 选项卡中圆角的解决方案。jquery themeroller 支持圆角，但文档说它们在 IE 中不起作用。

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

于 2009-02-12T23:48:14.723 回答