我正在使用 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 像素的圆角边框)完全是一团糟!
跟进 2
这是演示页面的链接。
由于其他设计师正在处理样式表和设计的其他部分,我不能保证它会在很长时间内保持完全反射,但希望它能够持续足够长的时间来解决问题。(是的,我知道 IE6 中存在 JS 错误,这不是我的问题)。
示例页面