1

Weird one... if you specify max-width of 100% on an image and display inline-block on its container, combined with a width attribute in the markup, IE8 does not show the image.

Here is a pen: http://codepen.io/iamkeir/pen/MYadRO
(View in full page on IE8: http://codepen.io/iamkeir/full/MYadRO)

<div class="problem">
  <img src="http://placehold.it/320x240" width="240" />
</div>

<style type="text/css">
  div {
    display: inline-block;
  }

  img {
    max-width: 100%;
  }
</style>

It can be fixed by making the container display inline instead of inline-block just for IE8, or specifying a width of 100% and max-width instead of width attribute... but this is not as handy as specifying widths in markup.

Two questions:
1) Is there a better/alternative fix?
2) Any idea what is actually going on? (I know, I know, "because IE8".)

NOTE: It seems whilst http://caniuse.com/#search=inline-block implies IE8 supports inline-block (), there is a known issue reported in the footer. Should probably be marked as partial support instead:
http://blog.caplin.com/2013/06/07/developing-for-ie8-inline-block-resize-bug/

iamkeir
  • 3,222
  • 2
  • 21
  • 22
  • 1
    Microsoft doesn't support or update IE8 anymore. Neither should we ;). – Jamie Barker Dec 04 '14 at 14:54
  • 5
    Microsoft *does* support IE8 (it also supports IE6 and IE7), just not on Windows XP. – Phylogenesis Dec 04 '14 at 14:57
  • See http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working – toto21 Dec 04 '14 at 15:00
  • No, doctype is all good. – iamkeir Dec 04 '14 at 15:05
  • It looks fine to me in IE8 and IE7 (doc mode). – skobaljic Dec 04 '14 at 15:13
  • 2
    Oh, I would be dancing naked in the streets if we could simply say "We don't have to support IE8". Truth is, we support what a significant percentage of our users use. If several thousand customers a month use IE8 on WinXP, we support IE8 on WinXP or lose those customers (or in our case, get slapped on the hand by our Federal overlords). – Phil Tune Dec 04 '14 at 15:15
  • 1
    @JamieBarker Sadly, most projects we work on are not up to us to decide which browsers are supported. Its usually up to the client and their requirements. – Pablo Rincon Dec 04 '14 at 15:41

1 Answers1

0

If you dont want to give the with to it then you can specify the min-with.

It works if you give min-width:240px; or waht ever width you want to specify.

I Hope it helps

iSqware
  • 156
  • 7