CSS3派零星工作

Question

我正致力于将我们公司的web应用程序带入21世纪，并试图使用一些新的CSS3功能，如边界半径和框影，以获得更现代的视觉效果。然而，我们90%以上的用户仍然使用IE8，它不支持这些选项。CSS3派似乎是一个完美的解决方案，但我遇到了一些奇怪的问题。

通过一些尝试和错误，我成功地获得了我想在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网站上复制这个问题，也没有在其他地方看到过它，所以我认为在我的实现中可能有不正确的地方。如果有任何想法我会很感激的。

更新

通过将饼文件移到我们应用程序的shell页面所在的webroot中，其中一些问题似乎已经消失(尽管很难用零星的问题来判断)。但是，在某些情况下，在我将鼠标移到头上之前，标题将不会显示样式。应用于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

通过将饼包括移到页面底部，大多数问题都消失了。CFLayout仍然不太好，所以我只是使用饼图禁用了布局区域本身的样式。

我剩下的一个问题是，对于页面更新，饼似乎没有相应地调整自己。当我们的细节页面加载时，页面的中心有一个cfLayout，底部有一个带有饼图样式的按钮。这些按钮在页面加载时正确显示，而cfLayout仍然是不可见的。然后cfLayout出现并按下页面的按钮。然而，有时，按钮的饼形设计将保留在它们加载的位置，而不是用按钮自己向下移动页面。

是否有任何方法调用饼图来强制基于父元素的当前位置进行位置更新？

Answer 1

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

在没有看到代码的情况下，IE8消失的列表项通常通过在ul或包装器上添加一个相对位置(或两者兼而有之)得到修正。如果这样做不起作用，就把它放在那里，然后摆弄z指数。然后重新签入好的浏览器或使用IE8 CSS黑客。

还有一些其他的想法可以尝试：

• 确保您的代码中有 html5志贺器 ，并确保它正在加载(谷歌并不总是在运行)。我用我的现代化建筑在本地托管它。读这个：标题消失，列表在IE8及以下版本中不受样式限制。
• 如果正在消失的项目是由脚本加载的css样式，会在jQuery之后将该脚本加载到头部。我注意到两个脚本没有在我的IE8工作中应用样式，当我在头中加载脚本时，它们再次工作。我在头中加载了我的jQuery库，但在页脚中加载了所有其他脚本，但是需要在头中加载两个需要脚本应用的回退脚本。