Chinaunix首页 | 论坛 | 博客
  • 博客访问: 969914
  • 博文数量: 168
  • 博客积分: 3853
  • 博客等级: 中校
  • 技术积分: 1854
  • 用 户 组: 普通用户
  • 注册时间: 2008-01-15 23:50
文章分类

全部博文(168)

文章存档

2014年(12)

2013年(46)

2012年(60)

2011年(11)

2010年(1)

2009年(17)

2008年(21)

我的朋友

分类: Html/Css

2013-11-08 10:03:44

说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更 灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“”和”“两个值。

box-sizing:content-box

当我们设置 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。

box-sizing:border-box

当我们设置box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的 “width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

示例如下:

width:200px
width:200px
width:200px
width:200px

Firefox 请使用 -moz-box-sizing

Safari / WebKit 请使用 -webkit-box-sizing

Opera 直接用 box-sizing 即可。

阅读(651) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~