输入类型提交与输入类型文本的宽度为100%

Question

我有一个登录表单,其样式为文本框,提交按钮拉伸到容器大小的100%.这是一个流畅的移动布局,但我的jsbin示例下面有一个固定的容器大小用于演示目的.

http://jsbin.com/ozutoq/9

在IE7,IE8,FF 4,Safari中 - 所有渲染按钮都比文本框略短.Firebug的布局工具显示宽度为500px的文本框,但提交按钮的宽度为498px.在我的实际例子中,提交按钮是6px skinnier.我怎样才能解决这个问题,以便占用全宽？

更新

我通过在输入上设置固定宽度来做另一个测试.似乎提交按钮不遵循框模型.我使用了100px的宽度,它显示了98px + 2px的边框,而文本框显示100px宽度+ 2px的边框.

所以,我想问题是如何在流畅的布局中处理这个问题？按钮上的-1px左右填充似乎不起作用,并且设计要求按钮上有1px边框!我不得不求助于js吗？

Answer 1

由于某种原因,mozilla设置了text类型的输入,-moz-box-sizing:content-box;但是submit按钮设置为-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 +支持