繁体   English   中英

使用SASS / Compass和PIE.htc的Rails 3

[英]Rails 3 using SASS/Compass and PIE.htc

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

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

这将安装示例样式表和PIE.htc行为文件,必须将其加载到IE的页面中。 该文件必须带有以下mime类型:

内容类型:文本/ x组件

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM