请在火狐浏览器测试，其他浏览器不一定有效
<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<style type="text/css">
textarea{display: block; width:500px;height:500px; margin:100px auto; }
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
-webkit-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style><script type="text/javascript">
</script>
</head> <body>
<div class="content-box">content-box </div>
<div class="padding-box">padding-box</div>
<div class="border-box">border-box </div>
<textarea style="">
浏览器的原因，我在谷歌浏览器上就是你这样的效果，但是火狐就是正常的
ie8+浏览器支持content-box和border-box；ff则支持全部三个值。
css3 box-sizing属性
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~
</textarea>
</body>
</html>