随着提交元素相比，div

当我有一个提交/按钮元素，我分配一个固定的，填充是从宽度中减去。当我将它应用到一个普通的div元素时，填充被添加到宽度。随着提交元素相比，div

有人可以指出我在何处解释这种行为吗？

.green_submit { 
    color: #fff; 
    background-color: #94c909; 
    padding: 25px; 
    width: 200px;

}

<input type="submit" class='green_submit' value="Validate" />

将导致146px的宽度。

<div class="green_submit"></div>

将导致200像素

http://jsfiddle.net/nnnS3/29/

来源

2013-05-13 YesMan85

宽度的box-sizing不是两者之间是一致的。使用box-sizing: border-box在宽度中包含填充和边框。

http://jsfiddle.net/nnnS3/30/

或者，使用content-box两个（但<div>没有边框）：

http://jsfiddle.net/nnnS3/31/

来源

2013-05-13 15:35:26

在Firefox中这不会改变任何东西...在Chrome中，最好是指定的元素。 – YesMan85 2013-05-13 17:37:05

@ Rogier21尝试'-moz-box-sizing' – 2013-05-13 17:55:37

输入元素和最表单控件有border-box为box-sizing的默认值属性..你可以通过扫描浏览器开发工具中的默认UA样式来仔细检查。如果您希望这两个元素中的行为保持一致，那么可以使用在CSS3中引入的box-sizing属性的其中一个值。该border-box值约束的元素填充和边境地区的宽/高

.green_submit { 
box-sizing: border-box; /* | padding-box (support is bad) | content-box */ 
}

来源

2013-05-13 15:39:39 Adrift

与其他答案一样：在Firefox中，这仍然和以前一样，在Chrome中是正确的。所以我想对盒子大小的支持还没有真正实现。 – YesMan85 2013-05-13 17:37:43

您需要添加moz前缀，例如'moz-box-sizing：border-box;'为FF – Adrift 2013-05-13 17:39:09

随着提交元素相比，div

回答

相关问题