0

我正在使用 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 像素的圆角边框)完全是一团糟!

带有偏移框的 Internet Explorer 8 IE7 是正确的 IE6真的很烂!

还提供IE8IE7IE6的全尺寸版本

跟进 2

这是演示页面的链接。

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

4

3 回答 3

1

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

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

希望对某人有所帮助。

于 2011-06-01T03:07:23.910 回答
1

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

于 2011-01-10T10:13:08.510 回答
0

尝试添加

position:relative;
z-index: 0;

正如这里建议的那样http://css3pie.com/forum/viewtopic.php?f=3&t=10

这个问题类似于此处发布的问题:CSS3 PIE - Giving IE border-radius support not working?

于 2011-01-14T14:49:28.050 回答