While working with a grid of product images that could vary in height, I wanted to vertically align them in their respective containers. I chose to use
display: table-cellwith a max-width on each image, but Firefox and IE ignored the max-width.
While browser testing, I realized the images ignored
max-width: 100% if it was inside an element with
display: table-cell. See the image below for an example.
View the problem code in this JSFiddle. Try it in Chrome/Safari or Firefox/IE to see the differences.