1

我正在使用Compass创建网页 CSS 样式。我想使用 CSS3 功能border-radius，linear-gradient但 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')
    );
}

它出什么问题了？

4

4 回答 4

3

我的测试方法是：

1/被PIE.htcIE 发现？PIE 文档指出：

注意：这个路径是相对于被查看的 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;
  /* (...) */
}

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

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

于 2011-11-25T23:11:19.617 回答
1

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

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

这是我在现实世界中的例子： http ://www2.highpoint.edu/

于 2011-12-01T13:53:38.223 回答
0

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

AddType text/x-component htc
于 2011-11-24T15:25:55.640 回答
0

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

于 2011-11-30T17:44:16.347 回答