html – 输入类型提交与输入类型文本的宽度为100％

概述我有一个登录表单被设计为使文本框和提交按钮伸展到容器大小的100％.这是一个流动的移动布局,但我的下面的jsbin示例有一个固定的容器大小用于演示目的. http://jsbin.com/ozutoq/9 在IE7中,IE8,FF4,Safari – 全部渲染提交按钮比文本框稍短. Firebug的布局工具显示的文本框的宽度为500px,但提交按钮的宽度为498px.在我的实例中,提交按钮是6px 我有一个登录表单被设计为使文本框和提交按钮伸展到容器大小的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支持

总结

以上是内存溢出为你收集整理的html – 输入类型提交与输入类型文本的宽度为100％全部内容，希望文章能够帮你解决html – 输入类型提交与输入类型文本的宽度为100％所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。