我在 Chrome 中进行了测试,显示正常,但在 Firefox 中,输入框比预期大。
这是标记:
<div class="form-wrapper">
<input type="search" name="Ofsearch"
placeholder="Search here..." value=""/>
<button id="searchButton" type="submit">
Search
</button>
</div>
这是风格:
.form-wrapper {
height: 80px;
clear: both;
}
.form-wrapper input {
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}
.form-wrapper button {
overflow: visible;
position: absolute;
float: right;
border: 0;
padding: 0;
height: 40px;
width: 110px;
border-radius: 0 3px 3px 0;
margin: 20px -118px;
}
这是中的示例fiddle http://jsfiddle.net/J8dSN/1/.
正如您从示例中看到的,在 Chrome 和 Firefox 中,它们以不同的大小显示。
当我检查这个问题时,我发现padding:20px
in .form-wrapper input{ }
造成了这个问题。但是,当我删除它时,Firefox 显示正常,但 Chrome 中的输入区域变小。只是想知道,有什么方法可以让它在两个浏览器中显示相同。
这是有区别的,因为 Firefox 使用box-sizing: content-box
on type="search"
输入,而 Chrome 使用border-box
.
.form-wrapper input {
box-sizing: border-box;
}
http://jsfiddle.net/J8dSN/12/ http://jsfiddle.net/J8dSN/12/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)