Why do Firefox and Opera ignore max-width inside of display: table-cell?

Question

The following code displays correctly in Chrome or IE (the image is 200px wide). In Firefox and Opera the max-width style is ignored completely. Why does this

Answer 1

This has become a very confusing topic...

Max-width doesn't work on inline elements neither in table-cell elements. It DOES work on an image if its display is set to block, but what is 100%? In a table layout, the content of a cell pushes the column width to accommodate all content as possible. So max-width:100%, inside a table cell ends up being the natural width of the content in most cases.

That is why setting the max-width property of your image in pixels works:

table-layout: fixed, as suggested by Alex, may work if the image is not in the first row of the table, because the first row's content dictates columns widths.