Internet Explorer (IE) 中的 JQuery 圆角混乱
我正在使用 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 而不是表格。
I'm using JQuery's jquery.corner.js to create rounded corners on some td tags, and they look fine in IE EXCEPT
- 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).
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.
Any ideas?
For reference, the Javascript code I'm using is as follows (it's a MOSS 2007 page):
$(document).ready(function(){
$("table.ms-navheader td").corner("top");
});
Here's a sample HTML page that displays the problem perfectly:
<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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
在 IE 中，我使用 DD_Roundies 库获得了更好的结果。 但仅适用于 IE。 对于 Firefox，您需要添加 -moz-border-radius 样式。
In IE I had better results with the DD_Roundies library. Only works in IE though. For Firefox you need to add -moz-border-radius styles.
我同意 RichH 的观点，我认为所有流行的 JavaScript 库在尝试创建圆角时都存在一些不足之处。
我总是发现自己使用cornershop：http://wigflip.com/cornershop/，它是一个图像/ css 生成器，消除了手动制作圆角边缘的痛苦。
I agree with RichH, I think that all of the popular JavaScript libraries leave something to be desired when trying to created rounded corners.
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.
您可能想尝试这个插件而不是 jquery.curvycorners.js。
我们在我们的项目中使用它完全没有问题 - 您可能需要附加/前置跨度，但它非常简单。
最好的事情-> 默认情况下抗锯齿。
http://blue-anvil.com/jquerycurvycorners/test.html
You might want to try this plugin instead 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.
http://blue-anvil.com/jquerycurvycorners/test.html
除了圆角 Javascript 库（尤其是 IE6 和 7）方面的麻烦之外，我一无所有。
最后，我恢复了涉及图像的更传统的方法。 设置起来有点麻烦，但效果很好。
I've had nothing but trouble with rounded corners Javascript libraries (especially with IE6 and 7)
In the end I've reverted to more traditional approaches involving images. A bit more of a chore to setup, but works perfectly.
curvycorners.js 和 jquery.curvycorners.js 仅在您不想使用任何过渡时才有效。
如果您有手风琴或淡入/淡出选项卡效果，则带有圆角的元素在更改后无法正确呈现。
curvycorners.js and jquery.curvycorners.js only work if you don't want to use any transitions.
if you have an accordion or fade in/out tab effect, the element with the rounded corners doesn't render correctly after change.
要使 jquery 曲线角在 IE 中工作，只需为元素提供背景颜色即可。
不知道为什么会这样……就像魔法一样！
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!
想象您遇到的问题有点困难，链接会非常有帮助。 确保为表格的每个单元格定义了高度和宽度属性。 这可能是一个 hasLayout 问题。
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.
我已经搜索过，但没有找到 jquery UI 选项卡中圆角的解决方案。 jquery themeroller 支持圆角，但文档说它们在 IE 中不起作用。
这是一个很好的页面，有 25 种不同的圆角方法
http://www.cssjuice.com/25-rounded-corners -技术-with-css/
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.
Here is a good page with 25 different rounded corner methods
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
我也遇到过类似的问题，即使在 Firefox 中，我发现如果您将“角”应用于具有设置背景颜色的类的元素，则角永远不会被应用。 就我而言，我添加了一个名为“selected”的类，它为 UL 中选定的“选项卡”提供不同的背景颜色。 为了防止这种情况，我在添加角点后使用 js 而不是 css 应用背景颜色：
此外，您还添加一个 :hover 来更改背景颜色，角点在悬停时会变方形。 到目前为止，我的解决方案是使用重新应用角的悬停事件（您也可以在此处设置颜色）。
至于 IE6——一场噩梦——如果我能检测到 IE6 并且不添加角点，让它们保持平方，那就不会太糟糕了。 还没试过 IE 7...
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:
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).
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...