Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE8 and CSS max-width on images #984

mattbrundage opened this Issue Feb 15, 2012 · 1 comment


None yet
2 participants
Copy link

mattbrundage commented Feb 15, 2012

Berea St. is reporting an issue with IE8 and how it handles max-width on images in certain situations:

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?


This comment has been minimized.

Copy link

necolas commented Feb 15, 2012

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.