Rails 3 使用 SASS/Compass 和 PIE.htc答案

【问题标题】：Rails 3 using SASS/Compass and PIE.htcRails 3 使用 SASS/Compass 和 PIE.htc
【发布时间】：2012-08-18 02:02:08
【问题描述】：

这是我的scss 代码：

@import "compass";
@import "compass/css3/pie";
@import "compass/css3";
@import "compass/utilities";
@import "compass/utilities/general/hacks";

$pie-behavior: url("./PIE.htc");

.align-center {
    text-align: center;
    margin-bottom: 0 !important;
}

.btn {
    @include pie;
    @include border-radius(25px);
    text-align: center;
    @include box-shadow(rgba(black, .39) 0 2px 3px);
    font-size: 10px;
    @include text-shadow(rgba(black, .5) 0 1px 0);
    @include filter-gradient(#e6478b, #bf3b74);
    background: #bf3b74;
    @include background-image(linear-gradient(#e6478b, #bf3b74));
    vertical-align: middle;
    text-transform: uppercase;
    color: white;
    border: none;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin: 0 auto;
    letter-spacing: 1px;
    padding: 7px 20px;
    line-height: 18px;
    position: relative;

    &.grey {
        @include filter-gradient(#cfcfcf, #888888);
        background: #cfcfcf;
        @include background-image(linear-gradient(#cfcfcf, #888888));
    }
}

由于某种原因，圆角在 IE 中没有被拾取。角落是方形的。我查看了大量的 Google 示例，我拥有它的方式就是其他人拥有它的方式。为什么这不起作用？

渲染的 CSS：

.btn {
  behavior: url("/stylesheets/PIE.htc");
  position: relative;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  text-align: center;
  -webkit-box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
  box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
  font-size: 10px;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6478B', endColorstr='#FFBF3B74');
  background: #bf3b74;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6478b), color-stop(100%, #bf3b74));
  background-image: -webkit-linear-gradient(#e6478b, #bf3b74);
  background-image: -moz-linear-gradient(#e6478b, #bf3b74);
  background-image: -o-linear-gradient(#e6478b, #bf3b74);
  background-image: -ms-linear-gradient(#e6478b, #bf3b74);
  background-image: linear-gradient(#e6478b, #bf3b74);
  vertical-align: middle;
  text-transform: uppercase;
  color: white;
  border: none;
  cursor: pointer;
  display: block;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 1px;
  padding: 7px 20px;
  line-height: 18px;
  position: relative;
}

【问题讨论】：

您是否尝试在自己的 IE 上使用您在自己计算机上的测试用例中找到的示例？这样你就排除了 SASS/指南针。这个问题与 Rails 关系不大，但是是一个 100% CSS 的问题。是否可以粘贴相关的“渲染”CSS？
我在上面添加了渲染的 CSS。

标签： ruby-on-rails-3 sass compass-sass css3pie

【解决方案1】：

查看http://compass-style.org/reference/compass/css3/pie/

这将安装一个示例样式表和一个 PIE.htc 行为文件，必须将其加载到您的 IE 页面中。此文件必须使用以下 mime 类型交付：

Content-Type: text/x-component

【讨论】：