Question

我有一个登录表单，其样式设置为文本框，并且提交按钮可以扩展到容器大小的100％。这是一个流畅的移动布局，但我的jsbin示例下面有一个固定的容器大小用于演示目的。

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

更新

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

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

Answer 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 +支持

Answer 2

我认为这是浏览器计算输入[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;
}

JQUERY：

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

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

http://jsfiddle.net/pZcx4/

ALTERNATIVE NATIVE 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/

Answer 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中将您的提交按钮显示为500px宽。并且，无论如何，您的表单设置为500px宽度，并且这不会改变，实现宽度设置百分比没有多大用处。

Answer 4

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

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

仅在Chrome上测试。

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

4 个答案: