Html 在Firefox中折叠边距对齐

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

我正在构建一个对话框，它修改一个文本输入，在左边给它一个下拉按钮。为了正确定位，我添加了一个包装器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块的容器div中，这样另一个内联元素（如按钮）就可以愉快地坐在它旁边

#container {
  display: inline-block;
}

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

<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是我们的权限范围（不包括按钮元素或他们选择放在输入旁边的任何其他内容）。

“免责声明”：首先，我要说的是，我没有找到导致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;
    }
}

---

其工作方式是简单地将

：before

覆盖放置在与div之前完全相同的位置。如您所见，我使用了与您相同的大多数样式，但我将它们放在了

：before

伪类上。

是由插件生成的HTML，它需要保持完全相同吗？我不确定我是否能够准确地理解第二个示例不起作用的原因，但是您似乎有太多的div元素。您可以简化：

HTML

我删除了边距，在父对象上使用了填充，它实现了同样的效果。您还需要在输入字段上保留一些

填充

，以便输入的文本不会消失在覆盖的

div

后面

编辑：如果无法更改标记，请执行以下操作：

SCSS：

---

从

输入

字段中删除

块

和

边距

声明，并将

#container

元素的间距移动到padding处。

若要解决此问题，需要在父

div#test2

中定义一个

行高

。没有它。这将导致Firefox产生这种奇怪的结果

现在，

行高

不是唯一的问题，而且

垂直对齐

的基线值将为内联元素生成不同于内联块元素的结果，而内联块元素的高度与周围的内联内容不同。要解决此问题，请将

#container

元素的值更改为

top

（因为这是

内联块

元素）

最终结果将更改以下内容（仅粘贴更改的部分）：

那看起来像

对评论的答复 我做了一些符合要求的东西。既然你说额外的代码（输入周围的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；底部：-5px。（您可以通过jQuery的
  $（input.css（'padding-top'）
  获得计算样式）

• 实际上，您还可以从中删除整个

  #容器，因为它现在唯一的样式是
  display:inline
  ，它实际上不会给整个内容添加任何内容

• 我在您的输入中添加了一个空白，因为否则您必须在覆盖后面键入，这太愚蠢了

---

其他答案不知道为什么它在Firefox上不起作用。我认为Firefox的行为是正确的，这是Chrome的问题
简而言之，您希望将输入与按钮对齐。但是输入在包装器中。然后，可以使用

vertical align

控制包装器和按钮之间的垂直对齐，但不能控制输入和按钮之间的垂直对齐
在这里，您可以看到具有不同垂直对齐方式的屏幕截图：
垂直对齐“>
看
如果要对齐输入和按钮（图像中的最后一种情况），则会出现问题，因为

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;
    }
  }
}

#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;
  }
}

#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
}

#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;
}

vertical-align: -(input bottom margin)

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

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

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

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

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