在这种情况下，为什么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)?

修改

如果是这样，我填写了关于Chromium项目的bug报告。

Answer 1

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

Answer 2

有类似的问题，在我的情况下，chrome并没有识别父元素的正确维度。

<li>
  <span></span>
</li>

li {
  position: absolute;
}
span {
  margin-left: -50%;
}

显示：块;对我有用......

span {
  display: block;
  margin-left: -50%;
}