发表新帖
发表新帖

CSS gradients in IE7 & IE8 is causing text to become aliased

后端 未结
关注
7 916
灰色年华
灰色年华 2021-02-05 07:58

I\'m attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).

相关标签:
7条回答
  • 温柔的废话
    2021-02-05 08:12

    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/

    0 讨论(0)
  • 萌比男神i
    2021-02-05 08:20

    You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)

    0 讨论(0)
  • 渐次进展
    2021-02-05 08:21

    Yes, that's a problem with IEx.

    Try using a solid background color:

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

    Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.

    Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.

    0 讨论(0)
  • 一生所求
    2021-02-05 08:22

    This may not count as elegant (or working) solution, but how about using Cufón for IE?

    0 讨论(0)
  • 野性不改
    2021-02-05 08:23

    Wrap the content with a DIV then add this to the DIV's css style...

    position: relative;

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

    0 讨论(0)
  • 轻奢々
    2021-02-05 08:31

    I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.

    The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.

    I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:

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

    (the hack could be improved, but it works for me, including IE9)

    0 讨论(0)
 看不清?
提交回复
热议问题