内联块内容在不同的浏览器中显示不同的结果？

Question

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

这在Firefox中很好，因为这是我正在寻找的 但是当我们在Chrome中看到相同的代码时（编辑，在Blisk，Yandex以及所有webkit浏览器，以及MS Edge和IE11中都有相同的结果），这就是我得到的：

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，看看the code here (Codepen.io) FF和Chrome是否以不同的方式处理CSS？考虑到.field班级有display: table-cell;，我认为Chrome正在显示正确的布局，但我对此并不确定。有没有办法实现Firefox在Chrome中显示的内容，而没有消除input field的响应特性？

感谢。

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