Question

I have a table and 2 columns in a row. In the first one I have a text input and in the other one I have a container div with a margin in em and 2 inline-block elements inside it.

Everything’s fine in Firefox, Safari and even in Opera. But in Chrome the second inline-block element is shifted below. The interesting thing is, if I set the margin(left) of the container in pixels, this doesn’t happen.

Here’s a fiddle: http://jsfiddle.net/inhan/bttBs/

Here’s the structure:

<table>
    <tr>
        <td><input type="text" /></td>
        <td>
            <div class="buttons">
                <a href="#" class="button reset"><span>Reset</span></a>
                <a href="#" class="button submit"><span>Submit</span></a>
            </div>
        </td>
    </tr>
</table>

And here’s the rough CSS

body {
    font-size:0.8em;
    font-family:Arial, Helvetica, sans-serif;
    color:#2E2E2E;
}
table,tbody,tr,td {
    border-spacing:0;
    margin:0;
    padding:0;
}
input[type="text"] {
    width:11em;
    border:1px solid #BBB;
    padding:4px 3px;
    margin:2px;
}
.buttons {margin-left:1em} /* set this to 13px */
a.button {
    text-decoration:none;
    outline:none;
    display:inline-block;
    *display:inline; zoom:1; /* IE 6/7 */
    width:65px;
    height:26px;
    margin:0 1px;
    font-family:'Open Sans';
    font-size:0.9em;
    text-align:center;
    color:#333;
    cursor:pointer;
    border-style:none;
    /* there's a bg image here */
    background-color:lightgray;
}
a.button span {
    display:block;
    margin:4px 0;
}

Does anybody know what’s happening there?

Answer 1

Apparently this was a bug with that version of Chrome at the time I asked this question. The issue does not exist anymore and the layout in the fiddle I provided looks just fine in the current version (23.0.1271.101) of Chrome in mac.