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 class 有 display: table-cell;，我觉得 Chrome 显示了正确的布局，但我不确定。有没有一种方法可以实现 Firefox 在 Chrome 中显示的内容，同时又不消除 input field 的响应特性？

谢谢。

Answer 1

不需要使用 table-cell 只需使用 float:left 并从 field class.

中删除 width

h1,
form {
  display: inline-block;
  vertical-align: middle;
}
h1 {
  font-size: 48px;
}
.field {
  float: left;/* Use floating here */
}
.field,
input {
  /*width: 100%;*/
}
input,
.btn {
  padding: 10px 16px;
}

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

Answer 2

只需删除属性: 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

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

inline-block content shows different results in different browsers?

html

css

firefox

google-chrome

responsiveness