CSS3 Pie 偶尔工作

Question

我正致力于将我们公司的 Web 应用程序带入 21 世纪，并尝试使用一些新的 CSS3 功能，如 border-radius 和 box-shadow 以获得更现代的视觉效果。然而，我们 90% 以上的用户群仍在使用不支持这些选项的 IE8。 CSS3 Pie似乎是完美的解决方案，但我遇到了一些奇怪的问题。

通过反复试验，我设法获得了我想在 IE8 中使用的所有 CSS 属性。使用的类的一些示例是:

    .pageTitle {
        border-radius: 12px;
        color:#fff;
        text-shadow: 1px 1px 0px #666;
        box-shadow: 5px 5px 3px #888888;

        background: -webkit-linear-gradient(blue, black); /* For Safari */
        background: -o-linear-gradient(blue, black); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(blue, black); /* For Firefox 3.6 to 15 */
        background: linear-gradient(-0.5deg, black, blue); /* Standard syntax */
        -pie-background: linear-gradient(top, blue, black); /*ie 6-9 via PIE*/

        behavior: url(../../common/compatibility/PIE.htc);
    }

    .headerGradient {
        background: -webkit-linear-gradient(blue, black); /* For Safari */
        background: -o-linear-gradient(blue, black); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(blue, black); /* For Firefox 3.6 to 15 */
        background: linear-gradient(-0.5deg, black, blue); /* Standard syntax */
        -pie-background: linear-gradient(top, blue, black); /*ie 6-9 via PIE*/
        behavior: url(../../common/compatibility/PIE.htc);
        position:relative;
    }

第一个用在页面顶部的 div 上，里面只有一两个单词。第二个用在我们的一些显示表格的标题上。

有时，当我访问使用这些类的页面时，这些元素根本不会出现。看起来这些类几乎被忽略了(导致元素以白色背景呈现)，但是元素中的文本应该显示为黑色并且仍然可见。它不是;我只看到一个开放的空白区域(尽管这些元素内的图像仍会出现)

发生这种情况时，只需将鼠标移到它上面，我就可以使“pageTitle”div 正确显示。但是，这不适用于“headerGradient”(和类似的)表头。刷新页面有时可以解决问题，但通常需要大量工作才能让 CSS3 Pie 再次启动。

我无法在 CSS3 Pie 网站上重现此问题，也没有在其他地方看到过它的讨论，因此我认为我的实现中可能存在某些不正确的地方。如果有任何想法，我将不胜感激。

更新

通过将饼图文件移动到我的 webroot，即我们应用程序的 shell 页面所在的位置，其中一些问题似乎已经消失(尽管很难用零星的问题来判断)。但是，在我将鼠标移到标题上之前，仍然存在标题没有样式的情况。我应用于 CFLayoutAreas 的所有样式(ext-js 选项卡和 Accordion )都无法正常工作:

        /* Controls the header of the cflayout accordions. */
        .x-accordion-hd {
            background: -webkit-linear-gradient(#9999ff, #333366); /* For Safari */
            background: -o-linear-gradient(#9999ff, #333366); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#9999ff, #333366); /* For Firefox 3.6 to 15 */
            background: linear-gradient(-0.5deg, #333366, #9999ff); /* Standard syntax */
            -pie-background: linear-gradient(top, #9999ff, #333366); /*ie 6-9 via PIE*/
            behavior: url(PIE.htc);
            position:relative;
        }

        .x-tab-strip,.x-tab-left,.x-tab-right {
            border-radius:5px 5px 0px 0px;

            background: -webkit-linear-gradient(#9999ff, #333366) !important; /* For Safari */
            background: -o-linear-gradient(#9999ff, #333366) !important; /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#9999ff, #333366) !important; /* For Firefox 3.6 to 15 */
            background: linear-gradient(-0.5deg, #333366, #9999ff) !important; /* Standard syntax */
            -pie-background: linear-gradient(top, #9999ff, #333366) !important; /*ie 6-9 via PIE*/
            behavior: url(PIE.htc);
            position:relative;
        }

事实上，标签和标签栏完全消失了。

我欢迎任何建议。

更新 2

通过将 PIE 包含移动到页面底部，大部分问题都消失了。 CFLayout 仍然表现不佳，所以我只是使用 PIE 禁用了布局区域本身的样式。

我剩下的一个问题是 PIE 似乎没有针对页面更新进行相应的调整。当我们的详细信息页面加载时，页面中央有一个 cfLayout，底部有 PIE 样式的按钮。按钮在页面加载时正确显示，而 cfLayout 仍然不可见。然后 cfLayout 出现并将按钮向下推到页面。但是，有时，按钮的 PIE 样式会保留在它们加载的位置，而不是随按钮本身一起向下移动页面。

有什么方法可以调用 PIE 来根据父元素的当前位置强制更新位置吗？

Answer 1

如果消失的元素由脚本加载的 css 设置样式，请在 jQuery 之后在头部加载该脚本。我注意到我在 IE8 中的工作中有两个脚本没有应用样式，当我在 head 中加载脚本时，它们再次起作用。我在头部加载了我的 jQuery 库，但在页脚中加载了所有其他库，但是需要在头部加载需要脚本应用回退的两个脚本。

在没有看到代码的情况下，IE8 消失的列表项通常通过在 ul 或 wrapper 或两者上添加相对位置来修复。如果这不起作用，请将其保留在那里并调整 z-index。然后重新检查良好的浏览器或使用 IE8 CSS hack。

一些其他尝试的想法:

• 确保您拥有 html5 shiv在您的代码中 并且它正在加载(谷歌并不总是在线)。我使用我的现代化构建在本地托管它。读这个:Header disappears and lists become unstyled in IE 8 and below

• 如果消失的元素由脚本加载的 css 设置样式，在 jQuery 之后在头部加载该脚本。我注意到我在 IE8 中的工作中有两个脚本没有应用样式，当我在 head 中加载脚本时，它们再次起作用。我在头部加载了我的 jQuery 库，但在页脚中加载了所有其他库，但是需要在头部加载需要脚本应用回退的两个脚本。