0

これが私の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;
}
4

1 に答える 1

0

http://compass-style.org/reference/compass/css3/pie/をご覧ください

これにより、サンプル スタイルシートと、IE のページにロードする必要がある PIE.htc 動作ファイルがインストールされます。このファイルは、次の MIME タイプで配信する必要があります。

コンテンツタイプ: text/x-component

于 2012-11-29T03:26:51.030 に答える