我有这个页面，第一行有 2 个文本框，第二行有一个文本框。我想让它们的宽度相同， 下面的代码在 chrome 中工作正常，但在 firefox 和 IE 中(在 IE9 中测试)宽度不同。我怎样才能使宽度相同 在所有浏览器中？
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br>
<input type="text" name="cpono"/>
</form>
</body>
</html>
Chrome
火狐
最佳答案
您可以使用 box-sizing: border-box; 使输入宽度的对齐更容易跨浏览器(它考虑了填充、边框和内容宽度)。它还使预处理器(如 Sass)中的宽度计算变得非常简单。
input[type="text"] {
box-sizing: border-box;
}
input[name="cnop"] {
width: 33px;
}
input[name="cno"] {
width: 122px;
}
input[name="cpono"] {
width: 155px;
}
检查 fiddle :https://jsfiddle.net/mshtacea/
关于HTML, CSS - 使文本框宽度相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31330396/