table-layout: fixed

< IE10 and Firefox ignore max-width on images (or other elements) inside display: table-cell.

by Carosn Shold

HTML

<div class="grid">
    <div class="grid-item">
        <div class="table">
            <div class="table-cell">
                <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" />
            </div>
        </div>
    </div>
    <div class="grid-item">
        <div class="table">
            <div class="table-cell">
                <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" />
            </div>
        </div>
    </div>
    <div class="grid-item">
        <div class="table">
            <div class="table-cell">
                <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" />
            </div>
        </div>
    </div>
    <div class="grid-item">
        <div class="table">
            <div class="table-cell">
                <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" />
            </div>
        </div>
    </div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.grid {
    position: relative;
    margin-left: -10px;
    width: 100%;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

.grid-item {
    position: relative;
    display: block;
    float: left;
    width: 25%;
    padding-left: 10px;
}

.grid-item img {
    display: block;
    max-width: 100%;
}

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0 auto;
    background: #f6f6f6;
    border: 1px solid #ccc;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}