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

我有这应该是内嵌在一个标题，像这样一个负责任的表单元素：内嵌块内容在不同的浏览器中显示不同的结果？

这是在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的响应特性？

谢谢。

来源

2016-08-24 DriftingSteps

等待 - 为什么我的问题投票关闭？ – DriftingSteps

好的，谢谢@Paulie_D。我不知道新的要求。 Stack Snippet已启动。 – DriftingSteps

你能像这样[** Codepen **]（https://codepen.io/vivekkupadhyay/pen/rLENKk?editors=0110）为'form'使用带有固定'width'的'position'吗？ – vivekkupadhyay

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

来源

2016-08-24 09:38:48 Rotan075

没有必要使用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>

来源

2016-08-24 09:34:38

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

回答

相关问题