Question

所以今天我正在搞乱一些投入。我有2个输入; 1个文本字段，1个提交按钮。我将它们的高度设置为相同，但是，由于某些奇怪的原因，它们不是。我尝试重置填充，最大/最小高度。无济于事。最后我决定使用相同的字体大小和填充来达到相同的高度。这背后的原因是什么，任何人都可以解释逻辑，这是故意的吗？

JSFiddle for demonstration：http://jsfiddle.net/FecEe/

HTML

<p>See how the heights are set to be the same, but yet, they are displated differently?</p>
<input class="sample1" type="text" name="email" placeholder="john@example.com">
<input class="sample1" type="submit" name="post" value="Enter">

<br><br>

<p>See how the height isn't set explicitly but the inherited height from the text and padding make the height the same?</p>                            
<input class="sample2" type="text" name="email" placeholder="john@example.com">
<input class="sample2" type="submit" name="post" value="Enter">

CSS：

.sample1{
    height: 50px; /* ...? */
    margin-top: 25px;
    margin-right: 5px;
    padding:10px;
    font-size: 2em;
    outline:none;
    border: 1px solid black;
}
.sample2{ 
    margin-top: 25px;
    margin-right: 5px;
    padding:10px;
    font-size: 2em;
    outline:none;
    border: 1px solid black;
}

Answer 1

The default stylesheet in WebKit（可能还有其他浏览器）应该受到指责：

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    -webkit-align-items: flex-start;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box
}

看到box-sizing: border-box？这使得你的按钮的高度表现得很直观（至少对我来说）：填充和边框从你50px的最大高度“增长”而不是“成长”。

所有元素（以及您的文本框）的默认box-sizing属性为box-sizing: content-box，其计算方式不同。

要修复它，只需让它们都使用相同的盒子模型（我会使用box-sizing: border-box;）。更好的是，省去一些麻烦并为所有元素做到这一点：

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

如果你支持它们，甚至会a polyfill for IE7 and IE6。

Answer 2

使用box-sizing：content-box;在sample1类

中

  .sample1 {
    height: 50px;
    margin-top: 25px;
    margin-right: 5px;
    padding: 10px;
    font-size: 2em;
    outline: none;
    border: 1px solid black;
    box-sizing: content-box;
    }

Answer 3

  .sample1 {
    height: 50px;
    margin-top: 25px;
    margin-right: 5px;
    padding: 10px;
    font-size: 2em;
    outline: none;
    border: 1px solid black;
    box-sizing: border-box;
    }

CSS：输入['submit']不一致的高度

3 个答案: