2

I had a small problem on internet explorer 8 and 9 that image results are not as expected. Pixel quality is very poor, but in other browsers like chrome, opera, and firefox looks very good.

this is my results :


enter image description here


the images rendered by IE looks fractions on a circle, and this is my CSS code :

.social-profiles ul li.facebook a {
    background: url(img/flat-social-icons/32px/Facebook-32.png);
    text-indent: -9999;
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */ }
Viper
  • 1,327
  • 2
  • 12
  • 33
Mkhuda
  • 69
  • 9
  • 1
    Maybe have a look at this question: http://stackoverflow.com/questions/4972818/ie-shows-black-border-around-png-when-faded-in – Joe Aug 18 '13 at 23:39
  • Possible duplicate of [Fit background image to div](https://stackoverflow.com/questions/8200204/fit-background-image-to-div) – Mkhuda Oct 27 '17 at 20:34

1 Answers1

5

I believe this is an issue with using the MSIE alpha filters with PNGs that possess alpha transparency themselves.

Your options are to:

  • bake the transparency into the image itself with an alpha channel
  • give the icons an opaque background that blends into the context
  • give the icons a transparent background gradient by using the MSIE gradient filter

I would choose the third for flexibility, but the first is probably the fastest.

Jimmy Breck-McKye
  • 2,923
  • 1
  • 22
  • 32