内联块元素仅在 Chrome 中以“em”（表格单元格内）的边距在容器内移动

Question

我有一个表格和 2 列连续。在第一个中，我有一个文本输入，而在另一个中，我有一个容器 div，其中有 em 的边距和 2 个内联块元素。

在 Firefox、Safari 甚至 Opera 中一切正常。但是在 Chrome 中，第二个 inline-block 元素被移到了下面。有趣的是，如果我以像素为单位设置容器的边距（左），这不会发生。

这是一个小提琴：http://jsfiddle.net/inhan/bttBs/

结构如下：

<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>

这是粗略的 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;
}

有人知道那里发生了什么吗？

Answer 1

在我问这个问题时，显然这是那个版本的 Chrome 的一个错误。该问题不再存在，我提供的小提琴中的布局在 mac 中 Chrome 的当前版本 (23.0.1271.101) 中看起来很好。

Answer 2

从<div class="buttons"> 中删除class

jsfiddle.net

Answer 3

一个可能有用的小建议是使用来自 meyerweb 的 CSS 重置，它可以在 Google 上轻松搜索。