Chrome vertical-align in Quirks and Standards modes

Question

The following images are the rendering for the same page using the same browser (Chrome 25). The only difference is one page have a DOCTYPE (thus in Standars mode) and one doesn't (thus in Quirks)

Quirks:

Standards:

Both cells have vertical-align: middle, both images are display: inline-block.
Vertical-align is working in Quirks but not in Standards, why?

---

HTML

<table class="oppres" id="oppscore4">
    <tbody>
        <tr id="oppscore4-main">
            <td><img src="images/gold.png"></td>
            <td></td>
            <td>0</td>
        </tr>
        <tr></tr>
        <tr id="oppscore4-total">
            <td></td>
            <td>=</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

CSS

table.oppres{
    height: 120px;
}

table[id^=oppscore]{
    width: 80px;
    font-size: 17px;
    line-height: 1;
}
table[id^=oppscore] tr{height: 1em;}
table[id^=oppscore] img{height: 0.9em;}
table[id^=oppscore] tr:nth-last-child(2){height: auto;}
table[id^=oppscore] td:first-child{text-align: right;}

More than enough code to reproduce the issue.

Answer 1

The issue is not about vertical-align on <td> but on <img />

Quirks mode triggers a behaviour explained here:

Vertical alignment of an image is under certain conditions to the bottom of the enclosing box, not to the baseline of text. This happens when the image is the only content within an element, typically a table cell. This means that e.g. an image in a table cell is by default at the bottom of the cell in Quirks Mode (which is often what the author wants), whereas in Standards Mode there is a few pixels spacing below the image (unless one sets e.g. vertical-align: bottom for the img element).

The space you see in standard mode below the image is actually the space between the <td>'s box baseline and bottom (cf. http://www.w3.org/TR/CSS2/visudet.html#leading).

When vertical-align is bottom on <img /> its box' bottom is aligned with <td>'s box bottom, so there is no space anymore.