指南针和 PIE 似乎不起作用答案

【问题标题】：Compass and PIE don't seem to work指南针和 PIE 似乎不起作用
【发布时间】：2012-01-03 09:28:19
【问题描述】：

我正在使用Compass 创建网页 CSS 样式。我想使用 border-radius 和 linear-gradient 等 CSS3 功能，但 Internet Explorer 拒绝合作。

我是这样编码的：

$pie-behavior: url("../stylesheets/PIE.htc");
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink').
$pie-base-class: pie-base;

.pie-base {
  @include pie-element(relative);
}

body {
  @include pie;
  @include background(
      image-url('header_background.png') no-repeat top center,
      linear-gradient(top center,
        $bg-gradient-start, $bg-gradient-stop
      ) no-repeat,
      image-url('wavy-white.jpg')
    );
}

这有什么问题？

【问题讨论】：

标签： css internet-explorer compass-sass sass css3pie

【解决方案1】：

我的测试方法是：

1/ PIE.htc 是否被 IE 发现？ PIE documentation 声明：

注意：此路径是相对于正在查看的 HTML 文件的，而不是调用它的 CSS 文件。

为了验证您的 Compass 文件中指示的目录是否正常，您可以在同一目录中添加图像并尝试将其显示为 HTML 图像，例如：

<body><div>
  <img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400">
</div></body>

2/ 然后尝试一些没有 Compass 代码的简单 CSS 规则，以避免 Compass 可能导致的问题，而不涉及 PIE。示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>PIE and border-radius</title>
    <style type="text/css">
    p {
        width: 400px;
        height: 100px;
        line-height: 100px;
        vertical-align: middle;
        text-align: center;
        color: yellow;
        background-color: darkgreen;
        border-radius: 5px 6px 7px 8px;
        pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */
        behavior: url(***/PIE.htc);
    </style>
</head>
<body>
    <p>this paragraph should be rounded in lesser IE</p>
</body>
</html>

3/ 其他 CSS3 指令一一添加，仍然在 CSS 中，没有 Compass 代码。 background 不会被 PIE 解析，您必须使用 -pie-background （不确定您的 Compass 是否会生成它？）。首先是一个没有多重背景的简单线性渐变：

p {
  /* (...) */
  -pie-background: linear-gradient(#F44, #400); /*PIE*/
  /* (...) */
}

然后是多重背景：

p {
  /* (...) */
  -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
                   url(***/repeating_image2.png) left top repeat,
                   darkgreen;
  /* (...) */
}

最后是混合：

p {
  /* (...) */
  -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
                   linear-gradient(#F44, #400),
                   darkgreen;
  /* (...) */
}

顺便说一句，您的多背景是否在 Firefox 和 webkit 浏览器上使用 -moz-linear-gradient 等成功显示？ generator from Colorzilla 可以帮助您处理所有这些前缀（对于 Compass 的下一步，它恰好通过“切换到 scss”支持其格式，以防您还不知道）。

4/ 然后在 Compass 文件中添加变量和 scss 代码。我帮不了你，我使用 LESS 或纯 CSS。您应该对照您的 Compass 代码检查生成的 CSS：后者是否会生成您想要生成的 CSS？

【讨论】：

【解决方案2】：

我发现 cssPIE 很难使用。当我设置它时，我使用了 js 实现而不是 htc 实现：

<!--[if lte IE 8 ]>
  <script src="/js/libs/PIE.js" type="text/javascript"></script>
<![endif]-->

这是我的真实示例：http://www2.highpoint.edu/

【讨论】：

【解决方案3】：

您是否尝试在 .htaccess 中添加正确的 MIME 类型？像这样：

AddType text/x-component htc

【讨论】：

是的，我已经通过curl -I http://localhost/pink/stylesheets/PIE.htc 进行了检查，并且得到了Content-Type: text/x-component。另外我使用的是 Nginx，而不是 Apache。
也许可以看看这个：stackoverflow.com/questions/8138464/…
不幸的是：$ cat /etc/nginx/conf/mime.types | grep htc 产生 text/x-component htc;

【解决方案4】：

我发现 cssPIE 不理解 rgba 值，所以我将渐变从颜色变为透明的想法不应该起作用：/ IE 也不理解 CSS 样式中的内联 SVG，所以即使该功能也不是工作。所以唯一的方法是为 IE 制作另一种样式并从所有渐变元素中删除渐变：/

【讨论】：