关键词：
【中文标题】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 我没有意识到这一点。感谢您的参考。css3pie 是如何工作的？
】css3pie是如何工作的？【英文标题】：Howdoescss3piework?【发布时间】：2011-04-2908:09:41【问题描述】：css3pie在幕后发生了什么使得IE可以使用css3功能？【问题讨论】：【参考方案1】：CSS3Piewebsite有很多细节，但我会尝试解释一下。... 查看详情
无法让 CSS3Pie 工作
】无法让CSS3Pie工作【英文标题】：Can\'tgetCSS3Pietowork【发布时间】：2012-02-2819:26:33【问题描述】：我觉得自己很愚蠢，好像我遗漏了一些非常明显的东西，但我已经检查了很多东西，但无法弄清楚哪里出了问题。我正在尝试使用C... 查看详情
CSS3 PIE 在 IE8 中无法正常工作
】CSS3PIE在IE8中无法正常工作【英文标题】：CSS3PIEnotworkingproperlyinIE8【发布时间】：2012-09-1607:34:18【问题描述】：我正在使用CSS3PIE在IE中呈现边框图像和边框宽度。在IE9中一切正常，但在IE8中却不行。奇怪的是，在IE8中，边框图... 查看详情
CSS3PIE 不使用边界半径 [重复]
...-02-2419:03:20【问题描述】：我正在尝试让CSS3PIE为我的网站工作，以便我可以在IE8（及更早版本）中使用边框半径。它在所有其他浏览器中都能正常工作。这是我的CSS：#body_text_designborder:2pxsolidblack;backgroun 查看详情
当我使用 cakephp 时，我在哪里放置 PIE.htc 文件（用于使 IE 与 CSS3 一起工作）
...用cakephp时，我在哪里放置PIE.htc文件（用于使IE与CSS3一起工作）【英文标题】：wheredoIputthePIE.htcfile(formakingIEworkwithCSS3)whenI\'musingcakephp【发布时间】：2011-10-2317:49:22【问题描述】：我正在尝试使用PIE.htc，这是一个脚本，希望可以... 查看详情
CSS3PIE 悬停问题
...不好。（是的，PIE处于活动状态，并且在页面的其他地方工作正常）失败实际上是在两个不同的元素上：1.回复链接的弯角（右上角和左下角）2.评论容器的边框（全部4个角）部分代码...<pclass="reply"&am 查看详情
CSS3 Pie 在 IE8 中不起作用
...：更新这似乎是IE8中background的问题。CSS3PIE似乎可以正常工作，但是当我有背景时它不显示。如果我完全删除背景css，它会再次显示。即：html,bodybackground:/*CSS*/;/*Removethisproperty*/现在我的问题变成了如何让CSS3P 查看详情
CSS3 PIE 不能在 IE 中缩放背景图像
...转换为sprite来加快网站加载速度，然后用CSS定位它们。这工作正常，直到您放大IE。虽然div、border-radius和阴影可以很好地调整大小， 查看详情
css3 pie 有多可靠[关闭]
】css3pie有多可靠[关闭]【英文标题】：howreliableiscss3pie[closed]【发布时间】：2011-04-2312:26:29【问题描述】：我刚刚遇到CSS3pie。我想知道它使用起来有多可靠？它可以在所有操作系统上运行吗？是否有任何可能无法运行的场景？【... 查看详情
MVC中的css3pie，pie.htc文件放在哪里？
】MVC中的css3pie，pie.htc文件放在哪里？【英文标题】：css3pieinMVC,wheretoplacethepie.htcfile?【发布时间】：2011-06-1917:50:45【问题描述】：我一直在尝试在我的MVC项目中使用Css3pie来渲染圆角面板，但到目前为止还没有成功。我使用普通... 查看详情
CSS3 Pie 与 Wordpress 的集成
】CSS3Pie与Wordpress的集成【英文标题】：CSS3PieintegrationwithWordpress【发布时间】：2012-04-0222:35:26【问题描述】：CSS3Pie是在IE中渲染一些CSS3内容的好工具。爱它！但是与Wordpress的集成似乎非常困难。情况如下：页面模板上的HTML：<d... 查看详情
CSS3 Pie边框消失了
】CSS3Pie边框消失了【英文标题】：CSS3Pieborderdisappeared【发布时间】：2011-11-1304:50:58【问题描述】：我正在尝试在我的asp.netmvc3.0应用程序中使用CSS3Pie但在IE9版本的情人中，边框完全消失了。这是我的css.boxmargin:auto;display:table;text-a... 查看详情
CSS3Pie 导致启动错误
】CSS3Pie导致启动错误【英文标题】：CSS3Piecausingstartuperror【发布时间】：2011-05-2407:14:34【问题描述】：导入CSS3Pie时，出现以下错误。UncaughtTypeError:Object[objectDOMWindow]hasnomethod\'attachEvent\'我正在使用Chrome。这可能是我造成的，还是... 查看详情
CSS3 PIE：圆角减慢 IE9，即使它本机支持它们
】CSS3PIE：圆角减慢IE9，即使它本机支持它们【英文标题】：CSS3PIE:roundedcornersslowdownIE9,eventhoughitsupportsthemnatively【发布时间】：2012-02-0407:30:32【问题描述】：我正在使用CSS3PIE为IE7/8添加对圆角的支持。我发现当页面上有很多带有... 查看详情
使用pie.htc进行ie兼容css3
...;3、可以愉快的写csshack啦，这时需要的圆角平移等等部分css3属性在ie678上都可以展示出来<!DOCTYPEhtml><html><head><title></titl 查看详情
cssxbrowserboxshadows（css3pie）(代码片段)
css3pie：CSS 行为属性是不是允许相对 URL？
】css3pie：CSS行为属性是不是允许相对URL？【英文标题】：css3pie:DoesCSSbehavioralpropertyallowrelativeURLs?css3pie：CSS行为属性是否允许相对URL？【发布时间】：2011-09-1900:59:19【问题描述】：我有一个使用CSS3PIE行为脚本的CSS文件，因此IE8将... 查看详情
CSS3 和 PIE 在 IE 8 中不起作用
】CSS3和PIE在IE8中不起作用【英文标题】：CSS3andPIEnotworkinginIE8【发布时间】：2011-06-0703:56:24【问题描述】：我正在尝试演示CSS3PIE，但它根本无法在IE中运行。HTML：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head>... 查看详情