Question

我正在使用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')
    );
}

它出了什么问题？

Answer 1

我的测试方法是：

1 / IE发现PIE.htc了吗？ 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代码。 PIE不会解析background，你必须使用-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;
  /* (...) */
}

BTW，你的multibackground是否在Firefox和webkit浏览器上成功显示了-moz-linear-gradient等等？ generator from Colorzilla可以帮助您使用所有这些前缀（并且对于Compass的下一步，它恰好通过“切换到scss”来支持其格式，如果您还不知道的话。）

4 / 然后在Compass文件中添加变量和scss代码。我无法帮助你，我使用LESS或纯CSS。您应该根据Compass代码检查生成的CSS：后者是否会生成您希望生成的CSS？

Answer 2

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

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

以下是我的真实世界示例：http://www2.highpoint.edu/

Answer 3

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

AddType text/x-component htc

Answer 4

我发现cssPIE不理解rgba值，所以我从渐变到透明的想法不起作用：/ IE也不理解CSS样式的内联SVG，所以即使是这个特性也是如此不工作。因此，唯一的方法是为IE创建另一种样式并从所有渐变元素中删除渐变：/

指南针和PIE似乎不起作用

4 个答案: