max-width: 100% in a table layout #18
Description
An issue which has been creating some problems in some sites with a combination of max-width:100% and display:table;
<div class="table">
<a href='…'> <img src='…'/></div>
</div>with the common CSS:
div.table {display:table;}
a {display:table-cell;}
img {max-width:100%;}tables adjust to inner content so if the image is bigger it will not fit in the table cell width aka a element here. Unfortunately Safari (WebKit) and Opera/Chrome (Blink) adjusts the size of the image to the inner context. A way to solve this for Firefox is to set table-layout: fixed;
div.table {
display:table;
table-layout:fixed;}
a {display:table-cell;}
img {max-width:100%;}