IE6和W3C标准浏览器对盒子模型宽带、高度的不同诠释
IE7/IE8/谷歌/firefox与IE6在宽度(width)定义上出现宽度的解释不同,总的来讲,IE7/IE8/谷歌/firefox基本是按照CSS的标准定义的,而IE6对盒子模型的解释与标准有出入。当我们试图为一个盒子设置尺寸的时候,问题出现了。IE6 和 W3C 标准浏览器对盒子模型有不同的解释,这个不同解释表现在盒子的尺寸上,下图是两种类型的浏览器对盒子尺寸的不同解释示意图:
可以看出,IE6 盒子模型中,盒子的尺寸包含了 内容区,padding, border 和 margin 这四个部分,而 W3C 的盒子模型中,盒子的尺寸只包含内容区,padding,border 和 margin 被排除在盒子尺寸之外。
------------------------------------------------------------------------------------------------------------------
1、IE7/IE8/谷歌/firefox即CSS标准对width的定义为content(内容)的宽度;而IE6把width解释为:content-width(即CSS标准width) + padding + border,而且如果width的宽度设置为100%或其他百分比等相对宽度时,貌似连margin的宽度也加进去了;
在IE6中div的宽度(width)值包括边框宽度,而IE7/IE8/谷歌/firefox等其它浏览器的宽度(width)值不包括边框宽度。
比如:设置一个div的CSS属性为:{width:100px;height:100px;border:#000000 1px solid;}
IE6中:div的实际宽度(包括边框宽度):100px,div的实际高度(包括边框宽度):100px;
而IE7与firefox:div的实际宽度(包括边框宽度):102px,div的实际高度(包括边框宽度):102px;
页:
[1]