logo标签列表

在Internet Explorer（IE）中，JQuery圆角出现问题

jquerycssinternet-explorerrounded-corners
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而不是表格了。
有多个jquery.corner.js插件。提供你使用的那个链接会很有帮助 :) - Vegard Larsen
9个回答
5

在IE浏览器中，我发现使用DD_Roundies库效果更佳。不过这个库只能在IE浏览器中使用。如果要在Firefox浏览器中实现圆角效果，则需要添加-moz-border-radius样式。

你不需要为Firefox/Webkit添加任何内容，脚本会自动添加，它可以跨浏览器工作。 - vsync
1
这个绝对是最好的。其他的都有一点小问题，不太完美。 - knowncitizen
DD_Roundies的想法是合理的，但它对IE8的支持不稳定且速度较慢（作者在网站上如此表示），这使得它对我来说无法启动。 - Noah Heldman
请注意，这个库存在一个问题（以及任何使用VML的IE库），在包含此库的页面中，jQuery可能会在某些情况下崩溃。http://github.com/jquery/jquery/pull/13 - Niyaz
4

我同意RichH的观点，我认为所有流行的JavaScript库在尝试创建圆角时都有些缺陷。

我总是使用Cornershop：http://wigflip.com/cornershop/，它是一个图像/CSS生成器，可以轻松自动生成圆角边缘。

就我个人而言，我很高兴他们没有添加大量额外的图像、标签、CSS或其他需要创建圆角的浏览器所不支持的CSS属性。当它不被支持时，我宁愿不要有圆角（在大多数情况下）。 - Darryl Hein
3

你可以尝试使用这个插件来代替jquery.curvycorners.js。

我们在项目中使用它，没有任何问题-你可能需要将其与span元素一起附加/前置，但非常简单明了。

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

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

这个东西很棒。我之前也遇到了其他插件的问题。 - Ronnie Overby
1
在其他浏览器上运行得很好，但在IE8上崩溃了！ - Kevin Laity
2

如果您不想使用任何过渡效果，curvycorners.js和jquery.curvycorners.js才能正常工作。

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

2

我一直在使用圆角Javascript库（尤其是IE6和7），但遇到了很多麻烦。

最终，我回归传统的方式，使用图片来实现。设置略微费劲，但完美运作。

1

为了让jQuery曲线角在IE中正常工作，只需给元素设置一个背景颜色。不确定为什么会这样...就像魔法一样！

0
我曾经遇到过类似的问题，即使在 Firefox 中，我发现如果将“corners”应用于具有设置背景颜色的类的元素，那么这些角将永远不会被应用。在我的情况下，我添加了一个名为“selected”的类，它为 UL 中选择的“选项卡”提供了不同的背景颜色。为了防止这种情况，我在添加了角后使用 JS 而不是 CSS 应用背景颜色：
$('.selected').css('background-color', '#3296C0');

如果你添加一个:hover来改变背景颜色，那么当鼠标悬停时，圆角会变成直角。目前的解决方案是使用onhover事件重新应用圆角（你也可以在这里设置颜色）。
 $('#top-nav li a').hover(function(){
        $(this).corners('top');
    });

至于IE6 - 真是个噩梦 - 如果我能检测到IE6并且不添加圆角，只保留它们的方形，那就不会太糟糕了。还没有尝试过IE7...

0

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

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接