It seems some older browsers don’t correctly interpret element widths when both
width: 100% and
max-width: none are set.
I created a quick pen on CodePen to test this out. The test has two examples.
The first example should show the placeholder image at it’s natural width (300px). All browsers seems to get this right.
The second example with
width: 100%; max-width: none; should show the image stretched to the full width of the red container. The value
none is the default for
max-width so the image should obey the 100% width declaration.
However in some browsers (notably Safari before version 5.1) the image will revert to its natural size. This is a screenshot from Safari 4.0.5 for example:
This seems to affect at least: IE6, Safari <5.1, and Android 2.3.
The solution seems to be to set:
max-width: 100% on the child element to force it to occupy the full width on all browsers.
Old version of Safari make up a very small percentage of global usage but Android 2.3 is still pretty common so it’s worth watching out for.