Question

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

Firefox，Safari甚至Opera中的一切都很好。但在Chrome中，第二个内联块元素向下移动。有趣的是，如果我以像素为单位设置容器的边距（左侧），则不会发生这种情况。

这是一个小提琴：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上轻松搜索。

Answer 2

从class

中删除<div class="buttons">

jsfiddle.net

Answer 3

显然，当我提出这个问题时，这是Chrome版本的一个错误。这个问题不再存在，我提供的小提琴中的布局在Mac的当前版本（23.0.1271.101）中看起来很不错。

内联块元素在容器内部移位，仅在Chrome中具有“em”（内部表格单元格）中的边距

3 个答案: