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

【问题标题】：Why does Chrome not respects negative margin in this case?为什么 Chrome 在这种情况下不尊重负边距？
【发布时间】：2014-10-02 05:30:29
【问题描述】：

我遇到了一个非常简单的代码问题。

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

IE 11

铬 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 报告。

【问题讨论】：

我会使用垂直对齐和浮动来统一对齐，根据需要删除任何填充和边距。例如：jsfiddle.net/j08691/gkndebpn
我同意@j08691，或者你可以试试 position:relative;顶部：7px；把它们往下推一点。
@j08691 好吧，它奏效了。但是margin-bottom 应该这样工作，对吧？

标签： html css google-chrome margin

【解决方案1】：

有类似的问题，在我的情况下，chrome 无法识别父元素的正确尺寸。

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

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

显示：块；为我做...

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

【讨论】：

【解决方案2】：

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

【讨论】：

嗯，它成功了，但没有解释margin-bottom 是否应该以它现在的方式工作。但是谢谢
我认为这是因为 chrome 中的错误。 <button> 标记中有一些文本时没有问题 - 默认 vertical-align 是 baseline 并且两个元素 content 基线都与父基线对齐（尝试向按钮添加一些文本并查看)。当<button> 标签中没有内容时会出现问题。 Chrome 然后（错误地）假设<button> 基线与按钮底部相同并将其底部与父基线对齐。使用vertical-align: top（或vertical-align: bottom）将所有元素的顶部（或底部）与整行的顶部（或底部）对齐。
我认为margin-bottom 不起作用，因为按钮中文本的基线不会随着边距变化而改变。