img-responsive images do not render when placed inside a list item of an inline list in IE8

[tommedema]

Steps to reproduce:

1. create an inline list: <ul class="list-inline"></ul>
2. add a (PNG) image as a list item with img-responsive class: <ul class="list-inline"><li><img class="img-responsive" height="52" width="130" src="https://www.whataddress.com/img/company_logo_bol.png" alt="bol.com" /></li></ul>

Expected behavior: the image should be displayed

Actual behavior: the image will not render in IE8

Note that removing list-inline or img-responsive will cause the image to render again, but when keeping img-responsive the image will cover the entire screen, which is undesired.

You can reproduce it at (http://jsfiddle.net/tommedema/PNqzH/7/) (editor in your modern browser) and (http://jsfiddle.net/tommedema/PNqzH/8/embedded/result/) (use this in IE8 to display it)

[carasmo]

http://stackoverflow.com/a/17489727/1004312
apparently... IE8 does support the max-width attribute but only when given a defined width first.

.selector {
    width: 100%;
    max-width: 250px;
}

[cvrebert]

What's the point of setting height="52" width="130" if you're making the image responsively scale anyway?

[mdo]

Almost inclined to punt on this, it's an odd one. Sounds like h5bp/html5-boilerplate#984 (comment) maybe?

[mdo]

Punting.