20

テキストを含む div で CSS グラデーションを使用しようとしています。Gecko と Webkit を使用すると、テキストは正常に表示されます。IE7 および IE8 では、テキストがエイリアス (ギザギザ) で表示されます。

このブログに出くわしました:「DXTransform を使用する要素で ClearType を無効にすることにしました」。

IE ブログ: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

それは 2006 年のことです。3.5 年後、このバグは修正されると思いますが、そうではありません。div に繰り返し背景画像を詰め込まずに IE8 でこれを行う方法はありますか?

これが私の言いたいことの例です。

<style>
    div
    {    height:     50px; 
         background: -moz-linear-gradient(top, #fff, #ddd);
         background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
         filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
    }
</style>

<div>Hello World</div>
<p>Normal text</p>

IE では、div 内のテキストはエイリアス (ジャギー) されますが、段落内のテキストはエイリアスされません。

画像を含まないソリューションは大歓迎です。

4

7 に答える 7

23

この問題の良い解決策はありません。

さらに悪いことに:progid:DXImageTransform.Microsoft.gradientはひどくバグが多いため、マウス イベント (ホバー、クリックなど) はそのまま通過します。そのような要素をクリックすると、たまたまその背後にある要素の別のクリックもトリガーされます。注意してください！

とにかく、どのフォールバック/回避策/NastyHacks が受け入れられるかを検討することから始めたほうがよいでしょう。

ここに私の頭の中でいくつかのアイデアがあります-私の個人的な好みの順序で:

  1. background-colorIE で単純なソリッドにフォールバックして、生活を続けてください。( FF と Webkit によって安全にオーバーライド/無視されるように、そのbackgroundルールを最初に配置してください。)

  2. background-imageIE でa を使用します。(再びその CSS ルールを最初に配置します)

  3. グラデーション ハックを使用し続けて、IE のぎざぎざのテキストを受け入れてください。

  4. Javascript (または IE 独自の CSSexpression()構文) を使用して空の要素を挿入し、それにグラデーションを適用して、テキストの後ろに配置します。

    div {
  background: -moz-linear-gradient(top, #fff, #ddd);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
  position: relative;
}
div div.ie-wrap {
  position: relative;
}
div div.ie-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}

    (警告: 上記のコードはテストされていないゴミの山であり、おそらくそのままでは機能しません。)

  5. グラデーション ハックを引き続き使用し、Cufonを使用してギザギザのテキストを VML レンダリングされたテキストに置き換えます。(サイトがフォント埋め込みを許可する書体を使用していることを前提としています。)

于 2010-04-26T00:01:31.037 に答える
3

PIE (http://css3pie.com、) グラデーションをレンダリングするかなりまともな仕事をします。（これは基本的にjavascriptを使用していますが）

于 2010-07-22T00:16:26.080 に答える
3

コンテンツを DIV でラップし、これを DIV の css スタイルに追加します...

position: relative;

http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html

于 2012-02-25T02:26:12.800 に答える
2

テキスト領域の背景を、特定の色が水平方向に白にフェードアウトし、CSS で 16 進数で定義されるようにしたいという状況がありました。私の会社の開発者以外のメンバーが16進数のみで新しい色を追加したい場合に備えて、カラーの背景画像を作成することは避けたかった.

私が見つけた解決策は、白のグラデーションの 24 ビット PNG を、作成中の領域の幅に合わせて透明に設定することでした。

次に、この IE のみのハックを使用して、CSS に選択した背景色をレンダリングさせ、白にフェードさせます。

background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;

（ハックは改善される可能性がありますが、IE9を含む私にとっては機能します）

于 2011-11-03T16:48:16.590 に答える
2

I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...

Lets assume:

<html>
<head>
  <title>IE8 filter problem causing jagged fonts</title>
  <style>
    html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
      position: relative;
    }
    .gradient {
      filter:
        progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
    }
  </style>
</head>
<body>
  <div class="gradient">
    <div>I am wrapped, therefore not jagged</div>
  </div>
</body>
</html>

Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.

Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/

于 2012-10-29T10:07:05.120 に答える
1

これは洗練された (または機能する) ソリューションとは見なされないかもしれませんが、IE にCufónを使用するのはどうでしょうか?

于 2010-03-23T22:06:29.937 に答える
0

はい、それは IEx の問題です。

無地の背景色を使用してみてください。

/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc

さて、 「繰り返し背景画像を詰め込む」という表現を使用する必要はありません。背景画像を使用して繰り返すことに何の問題もないので、それができるだけでなく、繰り返しできることに感謝すべきです。 X と Y。

もちろん、繰り返しの背景画像をできるだけ効率的にしたいので、（デザインに応じて）小さく/薄くして使用してください。何も間違っていないか、標準やベストプラクティスに反していないので安心してください.

于 2010-04-21T20:54:41.200 に答える