1

Compassを使用してWebページのCSSスタイルを作成しています。のようなCSS3機能を使用したいのですborder-radiusがlinear-gradient、InternetExplorerは協力を拒否します。

私はそれをこのようにコーディングしました：

$pie-behavior: url("../stylesheets/PIE.htc");
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink').
$pie-base-class: pie-base;

.pie-base {
  @include pie-element(relative);
}

body {
  @include pie;
  @include background(
      image-url('header_background.png') no-repeat top center,
      linear-gradient(top center,
        $bg-gradient-start, $bg-gradient-stop
      ) no-repeat,
      image-url('wavy-white.jpg')
    );
}

どうしたの？

4

4 に答える 4

3

私のテスト方法は次のようになります。

1 /PIE.htc IEによって検出されましたか？PIEのドキュメントには次のように記載されています。

注：このパスは、呼び出し元のCSSファイルではなく、表示されているHTMLファイルを基準にしています。

コンパスファイルに示されているディレクトリに問題がないかどうかを確認するために、同じディレクトリに画像を追加して、次のようなHTML画像として表示してみてください。

<body><div>
  <img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400">
</div></body>

次に、このディレクトリが適切かどうかを明確にする必要があります:)

2 /次に、コンパスによって引き起こされる可能性があり、PIEに関係しない問題を回避するために、コンパスコードを含まない単純なCSSルールを試してください。例 ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>PIE and border-radius</title>
    <style type="text/css">
    p {
        width: 400px;
        height: 100px;
        line-height: 100px;
        vertical-align: middle;
        text-align: center;
        color: yellow;
        background-color: darkgreen;
        border-radius: 5px 6px 7px 8px;
        pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */
        behavior: url(***/PIE.htc);
    </style>
</head>
<body>
    <p>this paragraph should be rounded in lesser IE</p>
</body>
</html>

3 /他のCSS3命令を1つずつ追加しますが、コンパスコードのないCSSのままです。backgroundPIEによって解析されないため、-pie-backgroundを使用する必要があります（コンパスがそれを生成するかどうかわからない場合）。まず、複数の背景のない単純な線形グラデーション：

p {
  /* (...) */
  -pie-background: linear-gradient(#F44, #400); /*PIE*/
  /* (...) */
}

次に、複数の背景：

p {
  /* (...) */
  -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
                   url(***/repeating_image2.png) left top repeat,
                   darkgreen;
  /* (...) */
}

そして最後にミックス：

p {
  /* (...) */
  -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
                   linear-gradient(#F44, #400),
                   darkgreen;
  /* (...) */
}

ところで、マルチバックグラウンドは、FirefoxやWebkitブラウザで-moz-linear-gradientなどを使用して正常に表示されていますか？Colorzillaのジェネレーターは、このすべてのプレフィックスを処理するのに役立ちます（Compassの次のステップでは、まだ知らない場合は、「scssに切り替える」を介してそのフォーマットをサポートします）。

4 /次に、コンパスファイルに変数とscssコードを追加します。私はそこであなたを助けることはできません、私はLESSまたはプレーンCSSを使用します。生成されたCSSをコンパスコードと照合する必要があります。コンパスコードは、生成する予定のCSSを生成しますか？

于 2011-11-25T23:11:19.617 に答える
1

cssPIEの操作には注意が必要です。私がそれを設定したとき、私はhtc実装の代わりにjs実装を使用しました：

<!--[if lte IE 8 ]>
  <script src="/js/libs/PIE.js" type="text/javascript"></script>
<![endif]-->

これが私の実例です： http ：//www2.highpoint.edu/

于 2011-12-01T13:53:38.223 に答える
0

.htaccessに適切なMIMEタイプを追加してみましたか？そのようです ：

AddType text/x-component htc
于 2011-11-24T15:25:55.640 に答える
0

cssPIEはrgba値を理解しないため、色から透明へのグラデーションを作成するという私のアイデアは機能しないはずです：/また、IEはCSSスタイルのインラインSVGを理解しないため、その機能も機能しません。したがって、唯一の方法は、IE用に別のスタイルを作成し、すべてのグラデーション要素からグラデーションを削除することです：/

于 2011-11-30T17:44:16.347 に答える