在 Firefox 中折叠边距对齐

Question

TLDR：this codepen 在 Chrome 中运行良好，但在 Firefox 中对齐已关闭。

我正在构建一个jQuery plugin，它会修改文本输入以在左侧为其提供一个下拉按钮。为了获得正确的定位，我添加了一个包装器 div，它与输入的高度相同，因此按钮可以绝对定位在输入的顶部，但仍然具有相同的高度：

#wrapper {
  position: relative;
}
#overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
}

这在输入具有垂直边距之前工作正常：然后容器增长到包含边距，因此下拉按钮随之增长。我对此的解决方案是边距折叠：我给出了输入 display:block 这意味着容器忽略了它的边距。都很好。

input {
  margin: 20px 0 40px; /* testing */
  display: block;
}

但现在的问题是，默认情况下，输入是内联元素，例如您可能希望在输入旁边有一个提交按钮。所以我用 display:inline-block 将整个东西包裹在一个容器 div 中，这样另一个像按钮这样的内联元素可以愉快地坐在它旁边。

#container {
  display: inline-block;
}

这在 Chrome 中运行良好，但在 Firefox 中当输入有任何垂直边距时会出现奇怪的对齐问题。下面我添加了最终标记。顶部还有一个 codepen 链接。

<div id="container">
  <div id="wrapper">
    <input>
    <div id="overlay"></div>
  </div>
</div>
<button>Submit</button>

编辑：关键是这是一个插件，我正在尝试使用用户现有的标记和 CSS，例如他们有这个标记：

<input><button>Submit</button>

并且他们现有的 CSS 在输入上具有垂直边距，我希望他们能够在输入上初始化我的插件并且它可以正常工作，而无需强迫他们更改其标记/CSS。现在因为插件需要在输入周围添加大量标记（用于覆盖和下拉列表），所以我将它全部包装在一个容器 div 中。这个容器 div 是我们范围的限制（不包括按钮元素，或者他们选择放在输入旁边的任何其他内容）。

Answer 1

要解决此问题，您需要在父级 div#test2 中定义一个 line-height。没有它，different browsers will give it different values。这会导致 Firefox 出现这种奇怪的结果。

现在，line-height 不是唯一的问题，vertical-align 的基线值也会为 inline 元素生成不同的结果，而不是对于具有与周围 inline 不同高度的 inline-block 元素内容。要解决此问题，请将 #container 元素的值更改为 top（因为这是 inline-block 元素）。

最终结果将有以下变化（仅粘贴更改的部分）：

#test2 {
    background-color: green;
    line-height:70px;
    #container {
        // replicate the inline nature of the input
        display: inline-block;
        vertical-align:top;
    }
    //the rest of the #test2 nested code
}

看起来像this。

回复评论

我制作了一些符合要求的东西。由于您说额外的代码（因此输入周围的 div）是由插件本身制作的，所以我冒昧地对其进行了一些更改以使其正常工作。

它可以很容易地工作的方式就是根本不使用内联块，而是坚持使用内联元素。这会将样式更改为以下内容：

#container {
    // replicate the inline nature of the input
    display: inline;
}
#wrapper {
    display: inline;
    position: relative;
}
input {
    // you'll want to make sure the typed text doesn't appear behind the overlay
    padding-left:35px;
}
#overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 1px;
    width: 30px;
    background-color: #00C2FF;
}

注意事项：

• 我没有费心让覆盖层覆盖输入的整个高度，因为您的插件无论如何都会让它成为一个标志。要使其覆盖整个高度，只需在叠加层上设置负 top 和 bottom 样式，等于输入上计算的 padding-top 和 padding-bottom （resp.）。在这种情况下，您必须将它们更改为 top:-5px;bottom:-5px;。 （您可以通过 jQuery 的$(input).css('padding-top') 获取计算样式）
• 您实际上也可以从中删除整个#container，因为它现在唯一的样式是display:inline，它实际上并没有给整个东西添加任何东西。
• 我在您的输入中添加了一个 padding-left，否则您必须在覆盖层后面输入，这很愚蠢。

Answer 2

插件生成的 HTML 是否需要保持完全相同？我不确定我能否确切地弄清楚为什么第二个示例不起作用，但是您那里似乎有太多 div 元素。你可以让它变得更简单：

HTML

<div id="test1">
  <div id="wrapper">
    <input>
    <div id="overlay"></div>
    <button>submit</button>
  </div>
</div>

SCSS

input, button {
  border: 1px solid black;
  padding: 5px;
}

input {
  display: inline-block;
  padding-left: 35px;
}

#test1 {
  background-color: yellow;
  padding: 20px 0 40px 0;
  #wrapper {
    position: relative;
    #overlay {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 30px;
      background-color: #00C2FF;
    }
  }
}

Codepen example

我已经删除了边距，而是在父级上使用了填充，它达到了同样的效果。您还需要在输入字段中添加一些 padding-left，这样输入的文本就不会消失在覆盖层 div 后面。

编辑：如果您无法更改标记：

SCSS：

#test2 {
  background-color: green;
  #container {
    // replicate the inline nature of the input
    display: inline-block;
    padding: 20px 0 40px 0;
  }
  #wrapper {
    // this is just here to be display:block and ignore the margin on the input
    display: block;
    position: relative;
  }
  input {
    // tell parent to ignore margin
    //display: block;
    margin: 0;
  }
  #overlay {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    width: 30px;
    background-color: #00C2FF;
  }
}

codepen demo

从input 字段中删除了block 和margin 声明，并将间距移动到#container 元素的填充。

Answer 3

“免责声明”：首先，我并没有找到导致 Firefox 问题的确切原因，但我确实想到了另一种方法。

这在 Firefox 和 Chrome 中的工作方式只是使用与 #test1 完全相同的 HTML，但最重要的是，还使用 ​​CSS :before 伪元素（而不是使用#container 和 #wrapper)。我使用的代码是：

#test2 {
    background-color: green;
    position:relative;
    &:before {
        content:"";
        display:block;
        position:absolute;
        left:1px;
        top:1px;
        bottom:1px;
        margin:20px 0 40px 0;
        width:30px;
        background:#00C2FF;
    }
}

demo

其工作方式是简单地将:before 叠加层放置在与之前的 div 完全相同的位置。如您所见，我使用了大部分与您相同的样式，但相反，我将它们放在了:before 伪类中。

Answer 4

其他答案不知道为什么它在 Firefox 上不起作用。好吧，我认为 Firefox 的行为是正确的，这是 Chrome 的问题。

简而言之，您希望将输入与按钮对齐。但是输入在包装器内。然后，您可以使用vertical-align 来控制包装器和按钮之间的垂直对齐，但不能控制输入和按钮之间的垂直对齐。

这里可以看到不同vertical-align的截图：

见the code。

如果您想对齐输入和按钮（图像中的最后一个大小写），您会遇到问题，因为您可以与 vertical-align 一起使用的任何关键字都可以做到这一点。只有在输入的上边距和下边距相等的情况下，vertical-align: middle 才有效。

但一般来说，您还有另一种解决方案：vertical-align 也接受 <length> 值。

而且，为了得到完美的对齐，你应该使用公式

vertical-align: -(input bottom margin)

或者，如果你想在按钮有下边距的情况下对齐它们，那么

vertical-align: -(input bottom margin) + (button button margin)

---

上面的代码公式适用于inline-block<div>，但不适用于<buttons>。

公式必须固定为

vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6

在你的例子中

• （输入底边距）= 40px
• （输入偏移高度）= 31px

那么，你需要

vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6

Demo

Answer 5

我可以通过以下方式实现它。Codepen 你必须知道应用于输入的 css 并将其应用于按钮

  button{
   position:absolute;
   margin-left:5px;
  }
  input, button {
   display: inline-block;
   margin: 20px 0 40px 0;
  }

Answer 6

请在下面的代码中更新。

input, button {
    border: 1px solid #000000;
    margin: 20px 0 40px;
    padding: 5px;
    vertical-align: top;
}

希望它会起作用

http://codepen.io/anon/pen/Isycu