获取指南针以生成适用于 ie8 的边框半径答案

【问题标题】：Getting compass to generate a border-radius that works in ie8获取指南针以生成适用于 ie8 的边框半径
【发布时间】：2023-03-29 13:04:01
【问题描述】：

我对 Compass 和 SASS 非常陌生（刚刚超出了非常基本的理解，进入了测试平台阶段），并且想尝试创建一个具有边界半径特性的 div，该特性可以跨浏览器工作，包括在 IE8 中. 我已经成功安装了 SASS 和 Compass，这已经创建了一个带有 ie.scss 和 screen.scss 的标准文件结构。 Compass watch 命令工作正常并成功编译 SASS 命令。但是我似乎无法让边界半径在 IE8 中工作（使用 PIE）。

这是我尝试使用的代码：

@import "compass/reset";
@import "compass/css3";
@import "compass/support";
@import "compass/css3/pie";
$legacy-support-for-ie: true;
.compound { @include border-radius(10px 15px, 10px 16px);
            border: 1px solid;
            behavior: url(PIE.htc);
}

我试过把它放在 screen.scss 和 ie.scss 中显然没有效果。我一定是错过了什么……但是什么？

顺便说一下，这里是 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <link href="stylesheets/screen.css" media="screen,projection" rel="stylesheet" type="text/css" />
        <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
        <link href="stylesheets/pie.css" media="screen,projection" rel="stylesheet" type="text/css" />
        <!-- [if IE]>
            <link href="stylesheets/ie.css" media="screen,projection" rel="stylesheet" type="text/css" />
        <![endif]-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div><h1>Test de compass</h1></div>
        <div class="compound">
            <p>Suspendisse bibendum libero eu tortor tempor, non convallis lectus hendrerit. 
</p>
        </div>
    </body>
</html>

【问题讨论】：

您是否验证过您正确使用了 PIE？
嗯，这正是我的问题：我认为我没有正确使用 PIE，但我无法弄清楚我所做的事情是不正确的！

标签： sass css3pie compass-sass

【解决方案1】：

我找到了答案 - 也许这会对其他人有所帮助。

我是在一个安装在Wampserver下的测试台上运行的，所以测试站主页的地址是http://localhost/pietest/index.html
但是，当您安装 PIE 时，它假定您位于 Web 服务器根目录，因此在安装时生成的 pie.scss 文件中创建的 URL 不正确。它使用的是 Web 服务器的绝对地址（“/stylesheets/pie.HTC”），而它需要是一个相对地址：这行得通 - “stylesheets/pie.HTC”

【讨论】：