IE6 和 8 中的 CSS3PIE 问题答案

【问题标题】：CSS3PIE issues in IE6 and 8IE6 和 8 中的 CSS3PIE 问题
【发布时间】：2011-06-06 10:19:46
【问题描述】：

我正在使用 CSS3PIE 将一些圆角应用于 Internet Explorer 中的元素，这将通过其他浏览器中的样式表获取它们。不过，我遇到了一些问题。

在 IE8 中，我发现任何具有 PIE 行为的元素都会表现得很奇怪。容器会向右跳几个像素，但内容会保持在其原始位置，看起来内容已经相对于其容器向左移动了。这对于没有或少量填充的元素尤其成问题。

我能够通过使用 X-UA-Compatible 解决 IE8 中的问题，但如果可能的话，我宁愿避免这种解决方案。我无法访问 IE9 进行测试，但我不需要像 PIE 这样的理解技巧，并且在不需要它的浏览器中强制使用兼容模式会很浪费。

我在 IE6 中遇到了更严重的问题，PIE 布局在设置为使用display:inline; zoom:1; 列表项的列表上完全崩溃（以模拟在 IE8 和其他浏览器中工作的内联块）。在这里，列表项的边框在完全错误的位置呈现。

因此，理想情况下，我希望 PIE 在 IE6 和 IE8 中正常工作，而不必求助于兼容模式。就 IE6 而言，在不应用 PIE 的情况下优雅的回退就可以了。 IE7 是页面按预期显示的唯一浏览器。

很遗憾，我目前无法提供示例页面，不过我可以稍后添加。

跟进：

以下是一些使用 IE Tester 制作的屏幕截图。我希望他们能让每个人都更清楚一点。如您所见，IE7 很好。然而，在 IE8 中，容器相对于它们的内容向左偏移，而在 IE6 中，列表元素（带有 1 像素的圆角边框）完全是一团糟！

还提供IE8、IE7 和 IE6 的全尺寸版本

跟进 2

这是一个演示页面的链接。

由于其他设计师正在处理样式表和设计的其他部分，我不能保证它会在很长时间内保持完全反射，但希望它能够持续足够长的时间来解决问题。（是的，我知道 IE6 中存在 JS 错误，这不是我的问题）。
Example page

【问题讨论】：

重新评论您对 IE9 的评论：IE9 将（应该）支持 PIE 实现的所有功能，因此 PIE 在 IE9 下显式关闭自身。 IE9 应该从您的标准 CSS 中拾取圆角等。您可以（并且应该）下载 IE9 预览版进行测试；它可以与其他版本的 IE 一起运行，因此不会造成任何伤害。
不幸的是IE9不是一个选项，我的主要机器是Mac，我可以访问的Windoes系统是基于XP的。

【解决方案1】：

我更喜欢使用http://www.curvycorners.net/

【讨论】：

与 PIE 相比如何？您是否同时尝试了这两种方法并发现了其中一个中没有的问题？
是的。我曾经使用 PIE，但遇到了问题。我发现了运行良好的路边角，我正在使用它。这是我使用它的网站。它适用于图像和 div。 timimeromatimro.com/timimeromatimro

【解决方案2】：

我在使用 IE8 时遇到了类似的问题。应用 PIE 的元素将首先显示低 10-20 像素，然后跳到正确的位置。将规则“显示：内联”应用于元素似乎可以解决问题。 “位置：相对；”和元素或父元素上的“缩放：1”似乎没有效果。

这有点奇怪。一旦应用规则“显示：内联”，问题就会消失刷新。但是，如果您删除该规则，它在刷新时看起来仍然没问题，直到您关闭并重新打开浏览器窗口 - 然后再次出现跳跃。

希望对某人有所帮助。

【讨论】：

【解决方案3】：

尝试添加

position:relative;
z-index: 0;

【讨论】：