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

【问题标题】：100% width on input type submit vs. input type text输入类型提交与输入类型文本的 100% 宽度
【发布时间】：2011-07-08 13:58:27
【问题描述】：

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

http://jsbin.com/ozutoq/9

在 IE7、IE8、FF 4、Safari 中 - 都呈现提交按钮比文本框短一点。 Firebug 的布局工具将文本框显示为 500 像素宽，但提交按钮显示为 498 像素宽。在我的真实示例中，提交按钮更窄了 6px。我该如何解决这个问题，让它占据整个宽度？

更新

我通过在输入上设置固定宽度进行了另一项测试。似乎提交按钮不遵循盒子模型。我使用了 100px 的宽度，它显示 98px + 2px 的边框，而文本框显示 100px 的宽度 + 2px 的边框。

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

【问题讨论】：

某处可能有填充或边距。试试给{padding:0px;margin:0px};
jsbin 示例设置 margin 和 padding 为 0
有趣。当我用jsbin的实时预览查看你的代码时，似乎还可以。但是只使用渲染功能似乎是错误的
@ScottE 这可能会回答您的一些问题：stackoverflow.com/questions/1450587/…

标签： html css

【解决方案1】：

由于某种原因，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+ 支持

【讨论】：

+1 即将发布相同内容。之所以如此混乱，是因为在渲染输入时从未定义浏览器应该遵循什么模型，所以有些人只是坚持使用多年前使用的表单输入，当时表单输入仍处于绷带中，每个供应商都使用它自己的处理它的推理。今天仍然存在混乱，但幸运的是我们在这方面改进了 css。不过 IE 还是会掉出来的。
有趣。这存在于 css3 中，但这对
IE8 似乎支持 css3 等价物，只要它不处于 quirks 模式。
我们只担心windows phone 7，所以这很好用。

【解决方案2】：

我相信这是浏览器计算 input[type=submit] 尺寸的方式。我尝试应用一些重置，但这些似乎也不起作用。我在带有 Chrome 的 Macbook Air 和您的 JSBin 示例中，实时预览看起来不错，但“渲染”验证了您的问题。

我尝试了 jsfiddle.net，它显示了同样的问题。如果这适用于您的应用程序，这是一种解决方法。只需从提交按钮中删除边框和背景并设置包装 div 的样式，然后在 div 上放置一个单击侦听器以提交表单：

CSS：

form { 
    width: 500px; 
    padding:0; 
    margin:0;
}
form div, form div input {
    height:20px;
    margin-bottom:4px;
}
input[type=text] { 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
}
#submit input{
    background:transparent; 
    margin:auto; 
    border:none;
}
#submit{ 
    text-align:center; 
    background-color:#CCC; 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0;
    cursor:pointer;
}

查询：

$('#submit').click(function(){
    $('#login').submit();
});

$('#login').submit(function(){
    alert('form submitted');
    return false;
});

http://jsfiddle.net/pZcx4/

替代原生 JS：

function submit_form()
{
    alert('form submitted');
    return false;

    // when you are ready, do this: document.forms['login'].submit();
}


document.getElementById('submit').addEventListener('click',submit_form,false);

http://jsfiddle.net/pZcx4/3/

【讨论】：

不幸的是，我将无法使用 jquery 库。此外，提交按钮有圆角（css3） - 这有点复杂。
您可以轻松地将圆角应用于 div 包装器。 JS 你用的是什么库？
我们没有使用 js 库。它适用于移动应用程序。 jquery mobile 已经被客户端拒绝了。他们像往常一样为银行客户担心安全问题。我们试图教育，但没有必要争论。

【解决方案3】：

确实很奇怪。我认为 1px 边框被添加到文本输入的外部，因此它是 500px 宽。

在提交按钮上，按钮在侧面计算，但显示在内部，因此您得到 500px - 1px - 1px = 498px 宽...

您可以做的一个可能的解决方案是创建以下 CSS：

.login-tb {
     border: 1px solid red;
     margin: 0;
     padding: 0;
     width: 500px;
}

#login-tb {
     border: 1px solid red;
     margin: 0;
     padding: 0;
     width: 502px;
}

这解决了您的问题，它仍然在 Firebug 中将您的提交按钮显示为 500 像素宽。而且由于您的表单无论如何都设置为 500px 宽度并且这不会改变，因此以百分比设置宽度并没有多大用处。

【讨论】：

问题是我正在处理流畅的布局 - 我不能为输入使用固定宽度。

【解决方案4】：

不确定这是否适用于您的环境。当我玩 jsbin 时，调整 width 工作...

.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }

仅在 Chrome 上测试。

【讨论】：

不，它不会工作。它是流动的——所以容器的宽度未知。
在我发布之前，当我在你的 jsbin 中将 width 从 500px 重置为 100% 时，它对我有用。