Chrome 中 div 设置 height: 100px 再设置大的 padding 高度为什么变大了?

另外我也设置了 box-sizing: border-box, 在 Chrome 里调试的,
关于 <div> 的代码大概是:

div{
   height: 100px;
   padding: 200px 0px;
}

我想的是设置了 height 之后高度肯定要限制的, 这要怎么做?

提问 2012年 12月1日 @ Mordekaiser 上等兵 (232 威望)

分享到：

1个回答

洗漱完毕，突然想起，这问题我貌似看错重点了，回来一看果然是。很不好意思。

变大是肯定的。我们看看w3c文档
http://www.w3.org/TR/2012/WD-css3-ui-...

border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

content的高宽的是用定义的width和height减去border和padding。但是content的width和height不能为负，最小差为0。如不满足条件会增大 “border box” 让差值最小0。

以上足够解释你的标题中的疑虑，至于你文中问的要怎么做。从你提供的例子看就是矛盾的问题。最好的方法就是遵循规范，避开问题。

以下是一开始的回复，我也就不删了。
----------------------------------------------------------------------------------------------------------------------------------
其实这个问题搜搜就有了。这要看你的chrome版本。比如我们看w3cschools给的 CSS3 Browser Support Reference
http://www.w3schools.com/cssref/css3_...

从chrome9开始支持 box-sizing 标准，而不需要 -webkit-box-sizing

所以你看看chrome版本，如果<9 就需要 -webkit-box-sizing:border-box;

如果版本>=9,那就要考虑是不是写错了。

我也给个例子

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type = "text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #_border_box{
            width:200px;
            height:200px;
            line-height:20px;
            border:10px ridge #f60;
            padding:100px;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box
        }
	</style>
</head>
<body>
       <div id="_border_box">200px</div>
</body>
</html>