Internet Explorer (IE) 中的 JQuery 圆角搞砸了

Posted 2023-03-06

技术标签:

【中文标题】Internet Explorer (IE) 中的 JQuery 圆角搞砸了【英文标题】：JQuery Rounded Corners in Internet Explorer (IE) messed up 【发布时间】：2010-09-18 04:10:32 【问题描述】：

我正在使用 JQuery 的 jquery.corner.js 在一些 td 标签上创建圆角，它们在 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 而不是表格。

【问题讨论】：

有多个 jquery.corner.js-plugins。您正在使用的链接会有所帮助。 :) 【参考方案1】：

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

【讨论】：

你不需要向 Firefox/Webkit 添加任何东西，脚本自己添加，它可以跨浏览器运行这是迄今为止效果最好的。所有其他人都有一点点不太对劲。 DD_Roundies 的想法是合理的，但是它的 IE8 支持很粗略而且速度很慢（作者在网站上这样说），这让我无法开始。请注意，此库（以及任何其他使用 VML 的 IE 库）存在问题，在某些情况下，jQuery 可能会在包含此库的页面中崩溃。 github.com/jquery/jquery/pull/13【参考方案2】：

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

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

【讨论】：

就个人而言，我很高兴他们没有添加一堆额外的图像、标签、CSS 或任何需要为不支持 CSS 属性的浏览器创建圆角的东西。当不支持时，我宁愿不使用圆角（在大多数情况下）。【参考方案3】：

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

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

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

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

【讨论】：

这东西很棒。我也遇到了其他插件的问题。效果很好，但在 IE8 中崩溃了！【参考方案4】：

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

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

【讨论】：

【参考方案5】：

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

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

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：

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

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

【讨论】：

【参考方案9】：

我也遇到过类似的问题，即使在 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...

【讨论】：

以上是关于Internet Explorer (IE) 中的 JQuery 圆角搞砸了的主要内容，如果未能解决你的问题，请参考以下文章

Telerik asp.net mvc datepicker Internet Explorer (IE) 8 中的“无效参数”

IE9 - 主页中的怪癖模式和特定 iframe 中的“Internet Explorer 9 标准”

导航栏中的徽标在 Internet Explorer 中未正确居中

SMIL：t：Internet Explorer 8 中的音频问题

Internet Explorer 中的 JQuery 选择器问题

Internet Explorer 中的 CSS 字体问题