Checkbox causes incorrect height on parent element

I am trying so solve a problem that causes me and my colleagues a splitting headache. Even though we've been provided a painkiller each we continue to be baffled by the way Google Chrome renders a checkbox in a container that has a font-size of 10pt.

The problem

Google Chrome seems to render some extra space around a checkbox element that I cannot seem to get rid of. The checkbox and its parent element must be 15 pixels tall. Setting the font-size of the parent element to 10pt causes that parent element to be 16 pixels in height.

An example

Take a look at the snippet below.

I have yet to find out (or understand) what causes the checkbox element to render as 15 pixels tall but effectively making its parent element 16 pixels tall.

td,
th
{
    padding: 0;
    font-size:   10pt;
}

input[type=checkbox]
{
    height: 15px;
    border: none;
    padding: 0;
    margin: 0;
}

<table width="100%" class="data">
    <tr>
        <th>Label 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th>Checkbox 2</th>
        <td><input type="checkbox" disabled="disabled" /></td>
    </tr>
    <tr>
        <th>Label 3</th>
        <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
    </tr>
</table>

^{Exchanging the table for a div, a p or any other container also results in an incorrect height for that container.}

Possible solution?

Setting the checkbox height to 14px makes the parent row 15 pixels tall. But then the checkbox itself does not meet the designer's requirements and thus this solution will not be accepted. Any workarounds?