CSS3 Pie 偶尔工作

Posted 2023-05-08

【中文标题】CSS3 Pie 偶尔工作

【英文标题】：CSS3 Pie working sporadically

【发布时间】：2014-01-08 09:47:17

【问题描述】：

我正在努力将我们公司的 Web 应用程序带入 21 世纪，并尝试使用一些新的 CSS3 功能，例如边框半径和框阴影，以获得更现代的视觉效果。但是，我们 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 网站上重现这个问题，我也没有在其他地方看到过它的讨论，所以我认为我的实现中可能存在一些不正确的地方。如有任何想法，我将不胜感激。

更新

通过将 pie 文件移动到我的 webroot（我们的应用程序的 shell 页面所在的位置），这些问题中的一些似乎已经消失（尽管很难用零星的问题来判断）。但是，在我将鼠标移到它们上方之前，仍然存在没有样式的标题出现的情况。我应用于 CFLayoutAreas（ext-js 选项卡和手风琴）的所有样式都无法正常工作：

        /* 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 来根据父元素的当前位置强制更新位置？

【问题讨论】：

我们有什么方法可以得到一个展示零星行为的演示？

@ZachSaucier 感谢您的评论。我不确定我是否可以很容易地复制它，但我今天会尝试把一些东西放在一起。

@ZachSaucier 对不起；我今天不能发这个了。我已经根据我们的实时站点创建了一个更简单的示例页面，但需要为其找到服务器空间并获得批准才能发布，这可能要到下周才会发生。

挺好的，只会帮你更快得到答案

是的。如果您在正文结束标记之前加载脚本加载速度更快，但我注意到我的 IE 条件脚本在文档页脚中加载之前加载，请尝试在其他脚本之后加载 pie。

【参考方案1】：

如果消失的项目正在由脚本加载的 css 设置样式，请在 jQuery 之后将该脚本加载到头部。我注意到两个脚本在我的 IE8 工作中没有应用样式，当我在头部加载脚本时，它们又可以工作了。我在头部加载了我的 jQuery 库，但在页脚中加载了所有其他库，但是需要在头部加载两个需要脚本应用后备的脚本。

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

尝试其他一些想法：

确保您的代码中有 html5 shiv 并且它正在加载（谷歌并不总是启动）。我用我的现代化器构建在本地托管它。阅读：Header disappears and lists become unstyled in IE 8 and below

如果消失的项目由脚本加载的 css 设置样式，在 jQuery 之后将该脚本加载到头部。我注意到两个脚本在我的 IE8 工作中没有应用样式，当我在头部加载脚本时，它们又可以工作了。我在头部加载了我的 jQuery 库，但在页脚中加载了所有其他库，但是需要在头部加载两个需要脚本应用后备的脚本。

【讨论】：

无论它是否作为答案，它都解决了原始问题，因此值得原始赏金:)。在一些帮助下，我重新创建了赏金，并会尽快将其奖励给这个答案。

@Nicholas 供将来参考，您可以直接奖励答案。无需为问题重新分配赏金。见Can I award a bounty to an old answer?

@JSuar 我没有意识到这一点。感谢您的参考。