Question

我正在努力将我们公司的Web应用程序带入21世纪，并尝试使用一些新的CSS3功能，如border-radius和box-shadow，以获得更现代的视觉效果。但是，超过90％的用户群仍然在IE8上，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标签和手风琴）的所有样式都无法正常工作：

        /* 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 include移动到页面底部，大多数问题都消失了。 CFLayout仍然不是很好玩，所以我只是简单地使用PIE禁用了布局区域的样式。

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

有没有办法调用PIE根据父元素的当前位置强制进行位置更新？

Answer 1

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

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

尝试其他一些想法：

确保您的代码中有html5 shiv 并且正在加载（Google并不总是处于启用状态）。我用我的现代化器构建在本地托管它。请阅读：Header disappears and lists become unstyled in IE 8 and below
如果消失的项目由脚本加载的css设置样式，在jQuery 之后将该脚本加载到头部。我注意到在IE8中我的工作中没有应用样式的两个脚本，当我在头部加载脚本时，它们再次工作。我在头部加载了jQuery lib，但页脚中的所有其他文件都加载了，但是需要在脚本中加载需要脚本应用回退的两个脚本。

CSS3 Pie零星工作

1 个答案: