内联块内容在不同的浏览器中显示出不同的结果？
漂流步骤
我有一个响应式表单元素，应该与标题内联，如下所示： 
这在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>或者，在此处查看代码（Codepen.io）。
FF和Chrome处理CSS的方式不同吗？考虑到.field该类具有Chrome浏览器，我认为它显示的布局正确display: table-cell;，但是我不确定。有没有办法在不删除Firefox响应性的情况下实现Firefox在Chrome中显示的功能input field？
谢谢。
罗坦075
只需删除该属性：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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用JavaScript从iframe中检测浏览器，并根据浏览器显示不同的<div>内容？
- 2
在不同浏览器中显示字体
- 3
硒：浏览器显示的内容与HTML代码不同
- 4
Localhost和127.0.0.1在Web浏览器中显示不同的内容
- 5
PHP Curl 从浏览器中的 URL 返回不同的结果
- 6
CSS网格在浏览器中显示不同的大小
- 7
关于在不同浏览器中显示的样式的差异
- 8
RSS Feed与浏览器中的显示完全不同
- 9
SVG 图像在浏览器中的显示方式不同
- 10
为什么网站 CSS 在浏览器中显示不同
- 11
桌面浏览器显示与移动浏览器不同
- 12
浏览器显示了大量不同的值
- 13
CSS内联块不会以链接形式显示在浏览器中
- 14
System.Web.HttpContext.Current.Cache在不同的浏览器中返回不同的结果
- 15
Javascript-encodeURI（）在不同的浏览器中重现不同的结果
- 16
不同浏览器中的javascript Ajax方法有不同的结果
- 17
localStorage.getItem（）在不同的浏览器中给出不同的结果
- 18
<li>文本溢出。在不同的浏览器中得到不同的结果
- 19
不同浏览器中的javascript Ajax方法有不同的结果
- 20
网格中的图片在不同的浏览器中显示方式不同
- 21
不同浏览器中的会话管理
- 22
在不同浏览器中的最高排名
- 23
不同浏览器中的定位问题
- 24
为什么在不同浏览器中显示相同功能的不同
- 25
为什么 dl 标签在不同浏览器中显示不同？
- 26
如何创建边框顶部宽度大于不同浏览器显示尺寸的内容的框？
- 27
相同的选择器在常规浏览器和硒中给出不同的结果
- 28
在不同的浏览器中渲染图像位置不同
- 29
不同浏览器中模糊事件的不同行为
我来说两句