使用Flexbox的输入元素在Webkit中添加了额外的间距

时间:2013-10-15 23:51:05

标签: html css html5 google-chrome flexbox

我有一个简单的表单,其中包含一个电子邮件字段和一个提交按钮,我正在应用flexbox布局。 flexbox本身工作正常,但似乎webkit在输入元素旁边添加了一些额外的间距(非输入元素看起来很好)。在IE11和Firefox中不会出现此问题,但在Opera和Chrome中会出现此问题。由于IE和Firefox不这样做,因此很难创建一致的跨浏览器UI。是否有一些属性我可以覆盖以防止添加这个额外的空间?或者这是一个错误吗?

<section id="inputContent">
    <input type="Email"/>
    <input type="Submit"/>
</section>

section
{
    display:flex;
}

小提琴http://jsfiddle.net/Dragonseer/2H2P5/

1 个答案:

答案 0 :(得分:0)

它的边框和边缘使它看起来如此,添加

input{
    margin:0;
    border:1px solid;

}

并且没有空间

http://jsfiddle.net/2H2P5/2/