Question

这是我的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;
}

Answer 1

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

这将安装示例样式表和PIE.htc行为文件，必须将其加载到IE的页面中。此文件必须与以下mime-type一起提供：

内容类型：text / x-component

Rails 3使用SASS / Compass和PIE.htc

1 个答案: