html - inline-block 内容在不同的浏览器中显示不同的结果？

Question

我有一个响应式表单元素，它应该与标题内联，如下所示:

这在 Firefox 中很好，因为这正是我要找的。
但是当我们在 Chrome 中看到相同的代码时(编辑，在 Blisk、Yandex 和可能所有的 webkit 浏览器，以及 MS Edge 和 IE11 中看到相同的结果)，这就是我得到的:

代码:

h1,
form {
  display: inline-block;
  vertical-align: middle;
}
h1 {
  font-size: 48px;
}
.field {
  display: table-cell;
}
.field,
input {
  width: 100%;
}
input,
.btn {
  padding: 10px 16px;
  box-sizing: border-box;
}

<h1>Inline title</h1>
<form action="">
  <div class="field">
    <input type="text" placeholder="Email Address" />
  </div>
  <div class="field">
    <button class="btn">Submit</button>
  </div>
</form>

或者，看看 the code here (Codepen.io) .
FF 和 Chrome 处理 CSS 的方式不同吗？考虑到 .field 类有 display: table-cell;，我觉得 Chrome 正在显示正确的布局，但我不确定。有没有办法在不移除 input field 响应特性的情况下实现 Firefox 在 Chrome 中显示的内容？

谢谢。

Answer 1

只需删除属性:table-cell 并确保所有内容都是inline-block:

h1,
form {
  display: inline-block;
  vertical-align: middle;
}
h1 {
  font-size: 48px;
}
.field {
  display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
  padding: 10px 16px;
}

在此处查看演示:CODEPEN