search

h5bp / html5-boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.
https://html5boilerplate.com/
MIT License
56.57k stars 12.26k forks source link

IE8 and CSS max-width on images #984

Closed mattbrundage closed 12 years ago

mattbrundage commented 12 years ago

Berea St. is reporting an issue with IE8 and how it handles max-width on images in certain situations: http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/

A rule in our @media print block causes the same issue:

I would suggest something like this, to follow the aforementioned rule:

And can someone confirm that !important is required on the existing rule?

necolas commented 12 years ago

Thanks. This is an old bug that has also been reported at the OOCSS repo. Tricky one.

IIRC, IE8 will never flexibly resize an image that has a % width and is the child of a float with no explicit width. As a result, I just disable max-width for images in components that meet those conditions; image doesn't disappear and all browsers have the same result.

Not sure about your proposed fix, despite the interesting idea of using an attribute selector. There might be images with large widths set in the HTML that would display badly in print for all browsers if that extra rule were added, even if they don't meet the other conditions required to disappear the image in IE8. You're probably better off making print-based changes on a per-component basis, or removing the width attribute if it's not essential.

!important is used to override the specificity of previous rules in the main stylesheet.