SharePoint image max-width in IE and FireFox not working

So you have an image that is styled to max-width: 100% but it displays at its native width and pushes over your other content.

The issue here is that images set to max-width: 100% don’t properly understand which parent they’re supposed to mimic the 100% width of, so they cascade up the list to the first logical element width a properly defined or definable width.

Webpart zones and the  divs involved in webpart bits (chrome, container, etc.) are set to display: table and table-cell.

Override it by adding this to your stylesheet:

.ms-webpart-zone,
.ms-webpart-chrome,
.ms-webpart-cell,
.ms-webpart-cell-vertical {
     display: block !important;
}

You can now safely add the max-width style to images in specific containers.  For your reference, I generally use this for web parts, specifically content editor web parts.

.ms-WPBody img {
     max-width: 100% !important;
     height: auto !important;
}

Please note: This will not work if you want webparts to render side-by-side in a single webpart zone since the display: block forces a full width on the container and wraps the next element.