CSS3 + HTML5SHIV + CSS3PIE Border-radius 不适用于 IE8，但适用于 IE7、9、10

Posted 2023-05-08

【中文标题】CSS3 + HTML5SHIV + CSS3PIE Border-radius 不适用于 IE8，但适用于 IE7、9、10

【英文标题】：CSS3 + HTML5SHIV + CSS3PIE Border-radius NOT working on IE8 but working on IE7,9,10

【发布时间】：2013-05-13 13:47:26

【问题描述】：

我正在使用的网站 - http://www.quickseorankings.com/dev/，其构建方式：

推特引导 html5 + CSS3 HTML5SHIV CSS3PIE

问题： 导航栏链接（活动）的边框半径在 IE8 上不起作用，即使使用 CSS3PIE。但它适用于 IE7、9、10（使用 browserstack 进行测试）

CSS 位置： /css/ CSS3PIE HTC 文件位置： /root/ 相同位置作为我的 index.html

HTC 编码为： behavior: url(PIE.htc);

---

修复尝试 #1：

behavior: url(/PIE.htc); 和 behavior: url(../PIE.htc); 甚至尝试使用 php - behavior: url(PIE.php); behavior: url(/PIE.php);

修复尝试 #2

添加 Htaccess：AddType text/x-component .htc

修复尝试 #3 使用：http://fetchak.com/ie-css3/ - 它实际上是一个 HTC 解决方案，但与 CSS3PIE 不同的方法。仍然没有工作..

【问题讨论】：

欢迎来到 Stack Overflow！这与我的专业领域相去甚远，但希望其他人能够提供帮助。您尝试过哪些无效的修复方法？

谢谢杰瑞。我尝试了 htc 位置引用的绝对路径 url，但没有引用。试过（/PIE.htc）和（PIE.htc）..我也试过（PIE.php）还是一样..尝试将htc和pie.php放在我的/pie/文件夹中，没有用..我知道 ie8 中的边界半径有不同的解决方案/解决方法，比如 jquery 角 js，但我想先解决这个问题..

尝试创建一个没有 TBS 并且只有圆角元素的新 html 页面。这样您就可以查看 TBS 是否导致 PIE 出现问题。 IMO - PIE 麻烦多于其价值。

使用 PIE 2.0 测试版，您的服务器上需要 PIE_IE678.js，并且您需要通过向 html 元素添加 pie-load-path 属性或使用绝对值来告诉 PIE 它在哪里样式表中指向 HTC 文件 (see source) 的 URL。或者坚持使用 PIE 1.0 稳定版，它无需外部 javascript 文件即可工作。

@ScottSimpson 谢谢。隔离过程引导我们找到答案 - 这是测试 quickseorankings.com/pie 。 CSS3PIE 根本不起作用。但是，fetchak ie-css.htc 工作 100%。问题是，为什么 fetchak 不能与 TBS 一起使用？

【参考方案1】：

您正在使用 PIE 2.0 测试版，PIE 2.0 的 .htc 文件只是加载外部 javascript 文件 PIE_IE678.js。您需要将PIE_IE678.js 上传到您的服务器，然后通知 PIE javascript 文件所在的位置。

最简单的方法是将PIE_IE678.js文件添加到与PIE.htc相同的目录，然后在你的css文件中使用absolute指向PIE.htc文件的URL，例如：

behavior: url('http://www.quickseorankings.com/dev/PIE.htc');

你的目录结构需要是：

quickseorankings.com/
   dev/
      PIE.htc
      PIE_IE678.js

注意：不要手动加载任何 PIE .js 文件，.htc 文件会为您加载额外的 javascript 文件。

【讨论】：

遵循上述答案并更新了 /dev/ 这是它得到的错误：网页错误详细信息用户代理：Mozilla/4.0（兼容；MSIE 8.0；Windows NT 6.1；Trident/4.0；SLCC2； .NET CLR 2.0.50727；.NET CLR 3.5.30729；.NET CLR 3.0.30729；Media Center PC 6.0；Tablet PC 2.0；.NET4.0C；.NET4.0E) 时间戳：2013 年 5 月 18 日星期六 21:44 :53 UTC 消息：“元素”未定义行：1 个字符：1 代码：0 URI：quickseorankings.com/dev/htc_script.js

您上传了错误的文件（我只在评论中链接了该文件以显示 PIE 如何尝试定位 javascript）。转到css3pie.com/download，下载PIE 2.0 beta 1，解压缩，将PIE.htc 和PIE_IE678.js 上传到您的dev 文件夹，然后在您的ie8.css 文件中使用上面列出的行为加载htc（使用绝对URL） .不要手动包含任何额外的文件。

我不确定我是否可以在这里添加非常相似的问题。 CSS3PIE 说他们支持 box-shadow，我们将如何在 pie 中编码呢？试过 -pie-box-shadow: inset 0px 3px 3px #999;没用，试过 rgba 模式，没用..你@pjumble 用饼图成功渲染了嵌入阴影吗？

@bootstrapper 不幸的是 PIE 不支持 inset 和 box-shadow - 请参阅：github.com/lojjic/PIE/issues/3