html - 仅在 Chrome 中，内联 block 元素在 "em"(表格单元格内)的边距内移动

Question

我有一个表和一行中的 2 列。在第一个中，我有一个文本输入，在另一个中，我有一个容器 div，它的边距为 em，里面有 2 个内联 block 元素。

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

这是一个 fiddle :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

一个可能有用的小建议是使用来自 meyerweb 的 CSS 重置，它可以很容易地在 Google 上搜索到。