Internet Explorer (IE) 中的 JQuery 圆角搞砸了
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/219338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Rounded Corners in Internet Explorer (IE) messed up
提问by Ryan Shripat
I'm using JQuery's jquery.corner.js to create rounded corners on some td tags, and they look fine in IE EXCEPT
我正在使用 JQuery 的 jquery.corner.js 在一些 td 标签上创建圆角，它们在 IE 中看起来很好，除了
- if you open a new tab and then come back to the page
- if you go to another tab, click a link, then come back to the page
- if you hover over a javascript-executing div / menu (I think).
- 如果你打开一个新标签然后回到页面
- 如果您转到另一个选项卡，请单击链接，然后返回该页面
- 如果您将鼠标悬停在执行 javascript 的 div / 菜单上（我认为）。
The rounded corners are replaced with horizontal lines, and text within the td tag is pushed down. Once the page is refreshed, however, the rendering is back to normal. In all cases it works perfectly in Firefox.
圆角被水平线替换，td 标签内的文本被下推。然而，一旦页面刷新，渲染就会恢复正常。在所有情况下，它都可以在 Firefox 中完美运行。
Any ideas?
有任何想法吗？
For reference, the Javascript code I'm using is as follows (it's a MOSS 2007 page):
作为参考，我使用的 Javascript 代码如下（这是一个 MOSS 2007 页面）：
$(document).ready(function(){
$("table.ms-navheader td").corner("top");
});
Here's a sample HTML page that displays the problem perfectly:
这是一个完美显示问题的示例 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>
In the above code, the TD will be messed up once you open up a new tab, but not the div. I don't have much control over the HTML emitted by MOSS, otherwise I might have bitten the bullet and used DIVs here instead of a table.
在上面的代码中，一旦你打开一个新选项卡，TD 就会被搞乱，而不是 div。我对 MOSS 发出的 HTML 没有太多控制权，否则我可能会咬紧牙关并在这里使用 DIV 而不是表格。
回答by pi.
In IE I had better results with the DD_Roundieslibrary. Only works in IE though. For Firefox you need to add -moz-border-radius styles.
在 IE 中，我使用DD_Roundies库获得了更好的结果。虽然只适用于 IE。对于 Firefox，您需要添加 -moz-border-radius 样式。
回答by mmattax
I agree with RichH, I think that all of the popular JavaScript libraries leave something to be desired when trying to created rounded corners.
我同意 RichH，我认为所有流行的 JavaScript 库在尝试创建圆角时都有一些不足之处。
I always find myself using cornershop: http://wigflip.com/cornershop/, it is an image / css generator that takes the pain out of making rounded edges manually.
我总是发现自己在使用cornershop：http://wigflip.com/cornershop/ ，它是一个图像/css 生成器，可以消除手动制作圆角的痛苦。
回答by penderi
You might want to try this plugin instead jquery.curvycorners.js.
你可能想试试这个插件而不是 jquery.curvycorners.js。
We use it on our project with no problem at all - you may need to append/prepend with spans but it's very straightforward.
我们在我们的项目中使用它完全没有问题 - 您可能需要附加/预先添加跨度，但它非常简单。
Best thing -> anti-aliased by default.
最好的事情 - > 默认情况下抗锯齿。
回答by Gafroninja
curvycorners.js and jquery.curvycorners.js only work if you don't want to use any transitions.
curvycorners.js 和 jquery.curvycorners.js 仅在您不想使用任何过渡时才有效。
if you have an accordion or fade in/out tab effect, the element with the rounded corners doesn't render correctly after change.
如果您有手风琴或淡入/淡出选项卡效果，则带有圆角的元素在更改后无法正确呈现。
回答by RichH
I've had nothing but trouble with rounded corners Javascript libraries (especially with IE6 and 7)
除了圆角 Javascript 库（尤其是 IE6 和 7）之外，我什么都没有
In the end I've reverted to more traditional approaches involving images. A bit more of a chore to setup, but works perfectly.
最后，我又回到了涉及图像的更传统的方法。设置起来有点麻烦，但效果很好。
回答by Ozioma
to make jquery curvy corners work in IE simply give the element a background color. No sure why it's so...just works like magic!
要使 jquery 曲线角在 IE 中工作，只需给元素一个背景颜色。不知道为什么会这样……就像魔法一样！
回答by Bryan A
It's a bit hard to visualize the issue you're having, a link would be really helpful. Make sure your height and width properties are defined for each cell of your table. It could potentially be a hasLayout issue.
想象您遇到的问题有点困难，链接会非常有帮助。确保为表格的每个单元格定义了高度和宽度属性。它可能是一个 hasLayout 问题。
回答by Bob Weber
I've searched and haven't found a solution to rounded corners in jquery UI tabs. The jquery themeroller supports rounded corners, but the documentation says they don't work in IE.
我已经搜索过但没有找到解决 jquery UI 选项卡中圆角的方法。jquery themeroller 支持圆角，但文档说它们在 IE 中不起作用。
Here is a good page with 25 different rounded corner methods http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
这是一个很好的页面，有 25 种不同的圆角方法 http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
回答by Kris
I've had similar problems, even in firefox, I found that if you apply 'corners' to a element which has a class which sets a background color the corners never get applied. In my case I add a class called 'selected' which gives a different background colour to the selected 'tab' in a UL. To prevent this I apply the background colour using js instead of css after I have added the corners:
我遇到过类似的问题，即使在 Firefox 中，我发现如果将“角”应用于具有设置背景颜色的类的元素，则角永远不会被应用。在我的例子中，我添加了一个名为“selected”的类，它为 UL 中选定的“选项卡”提供了不同的背景颜色。为了防止这种情况，我在添加角后使用 js 而不是 css 应用背景颜色：
$('.selected').css('background-color', '#3296C0');
Also it you add a :hover which changes the background colour the corners are squared back off on hover. The solution I have so far is to use a onhover event which reapply the corners (you could set the color here as well).
此外，您还添加了一个 :hover ，它会更改背景颜色，在悬停时将角变回方正。到目前为止，我的解决方案是使用重新应用角落的 onhover 事件（您也可以在此处设置颜色）。
$('#top-nav li a').hover(function(){
$(this).corners('top');
});
As for IE6 - a nightmare - it would not be so bad if I could detect IE6 and just not add corners leaving them squared. Not even tried IE 7 yet...
至于 IE6 - 一场噩梦 - 如果我能检测到 IE6 并且只是不添加角使它们成为平方，那也不会那么糟糕。甚至还没有尝试过 IE 7...
