Please check out this example, first in FF, Chrome or Safari:
[demo link removed]
You will 开发者_如何学JAVAnotice a large image. It will actually scale as you resize your window. It is a fluid image inside a fluid container. Now check it in IE8 or IE7. It is only 1 pixel high :(
I was suspecting that IE requires some sort of width fix to give it some base dimension, so I was playing around with giving the image a min-height of 75%, or a min-width of 75% in case it concerns a portrait image. That indeed gives it the height that is needed, however, it breaks the resize feature. With a min-height of 75%, resize the window to a narrow width to see what I mean, it will lose the aspect ration of the image.
Why oh why can't IE respect these liquid widths and heights?
PS: I was thinking about hasLayout fixes, but that is removed from IE8 and doesn't seem to work in earlier versions for this specific case either.
Simply removing the entire height
attribute on the image fixes it in IE, Firefox, Chrome.
精彩评论