IE8: Images disappear when placed inside a float:left container

Posted: August 16, 2012 in Javascript/CSS
Tags: ,

I encountered this issue today. It’s really weird because it only happens in IE8.

Again, Microsoft failed and Google delivered.

Many thanks to this articale: http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/, and I realize that it’s because of the max-width:100% in Bootstrap and I am using it.

I resolve this issue by overriding the max-width to none as below

<div style="float:left;"><img src="image.png" width="42" style="max-width:none;" ></div>

Conclusion: IE sucks, as always!

BTW, Bootstrap is really a great design Kit and it saves lots of design time for us non-designers.

Advertisements
Comments
  1. […] image cannot have max-width:100% or IE8 collapses it. The solution is to override max-width to use […]

  2. Ban Chan Tran says:

    thanks for your share… 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s