Ok这似乎不可能得到正确。我有一个文本框和一个选择框。我想他们是相同的宽度,所以他们排队在左边距和右边距。
input, select {
width: 200px;
}
123
那会是你想的,对吧?不。 Firefox中的选择框缩短6px。查看屏幕截图。
好,让我们编辑代码,使两个样式。
input {
width: 200px;
}
select {
width: 206px;
}
确定工作!
等待,在Chrome中测试更好!
有人可以告诉我如何在所有浏览器中排队这些?为什么我不能只做宽度:200px所有,为什么所有的浏览器显示不同?另外,虽然我们在它为什么是文本框和选择框不同的高度?我们如何让他们到同样的高度?已尝试高度和行高没有效用。
解:
Ok我找到了解决方案,从下面的答案一些帮助。关键是使用box-sizing:border-box属性,因此当您指定包括边框和填充的宽度时。参见excellent explanation here.然后浏览器不能填充它。
代码在下面,还设置框的高度为相同的大小和缩进框中的文本,使其排列。你还需要设置边框,因为Chrome有一个真正奇怪的边框,它使用的选择框,将抛出的对齐方式。这将适用于HTML5网站(例如支持IE9,Firefox,Chrome,Safari,Opera等)。
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
123
123456789 123123123123
123456789 123123123123 134213721381212
只需一个最后一个警告,你可能不希望输入按钮,复选框等包含在这个样式,所以使用输入:not([type =’button’])不应用于某些类型或使用输入[type =’text’ ],输入[type =’password’]以指定您希望它应用于的类型。