html - 为什么 Chrome 在这种情况下不尊重负边距？

Question

我在使用非常简单的代码时遇到问题。

Chrome 似乎忽略了我正在使用的负 margin-bottom。在 IE11 中按预期工作。

IE 11

Chrome 38

我只是想对齐它们。我知道我可以使用更多代码来实现，但我想知道我是否期望 margin-bottom 的工作方式与应有的工作方式不同:

<div id="main">
    <select>
        <option value="2014">2014</option>
    </select>
    <button></button>
    <select id="AmbientesSelect">
        <option value="TEST">TESTE</option>
    </select>
    <button></button>
</div>

这是CSS:

#main {
    background-color:red;
}
#main button {
    width: 28px;
    height: 23px;
    border: solid 1px #ccc;
    margin-bottom: -7px;
}

现场再现:http://jsfiddle.net/v4bd7xjy/2/

我搜索了一些问题，但它们太具体或太不同。其中一些:

Why Chrome doesn't respect the margin properly?

Negative margin-bottom rendering not correctly in Chrome

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

编辑

如果有的话，我填写了 bug Chromium 元素报告。

Answer 1

尝试添加到您的按钮 vertical-align: top;