内嵌块内容在不同的浏览器中显示不同的结果？
问题描述：
我有这应该是内嵌在一个标题，像这样一个负责任的表单元素： 内嵌块内容在不同的浏览器中显示不同的结果？
这是在Firefox罚款，因为这是我要找的。
但是，当我们在Chrome中看到相同的代码（编辑，在整体叶盘，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浏览器显示正确的布局，但我不确定。有没有一种方法可以实现Firefox在Chrome中显示的内容，同时不会消除input field的响应特性？
谢谢。
答
只需删除属性：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
答
没有必要使用table-cell只是使用float:left并从field类删除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>
等待 - 为什么我的问题投票关闭？ – DriftingSteps
好的，谢谢@Paulie_D。我不知道新的要求。 Stack Snippet已启动。 – DriftingSteps
你能像这样[** Codepen **]（https://codepen.io/vivekkupadhyay/pen/rLENKk?editors=0110）为'form'使用带有固定'width'的'position'吗？ – vivekkupadhyay