前端之家收集整理的这篇文章主要介绍了
html – 输入类型提交与输入类型文本的宽度为100％，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个
登录表单被设计为使文本框和提交按钮伸展到容器大小的100％.这是一个流动的移动布局,但我的下面的jsbin示例有一个固定的容器大小用于演示目的.
http://jsbin.com/ozutoq/9
在IE7中,IE8,FF4,Safari – 全部渲染提交按钮比文本框稍短. Firebug的布局工具显示的文本框的宽度为500px,但提交按钮的宽度为498px.在我的实例中,提交按钮是6px skinnier.如何解决这个问题呢,它占据了整个宽度？
更新
我通过在输入上设置固定宽度来进行另一个测试.似乎提交按钮不符合框模型.我使用了100px的宽度,它显示98px 2px的边框,而文本框显示100px宽2px的边框.
所以,我想问题是如何处理这个流畅的布局？按钮上的-1px左右填充似乎不起作用,设计要求按钮上有1px的边框！我必须诉诸于js吗？
由于某种原因,mozilla将文本类型的输入设置为-moz-
Box-sizing：content-
Box;但是提交按钮设置为-moz-
Box-sizing：border-
Box;
设置以下内容将为您提供FF中的预期渲染.
.login-tb {
border:1px solid red;
-moz-Box-sizing:border-Box;
-webkit-Box-sizing:border-Box;
Box-sizing:border-Box;
margin: 0;
padding: 0;
width:100%;
}
更新：添加了Safari和IE8支持
原文链接：https://www.f2er.com/html/230738.html
