css的盒子模型与hack技术

最新推荐文章于 2025-05-09 16:56:05 发布

iteye_17455

最新推荐文章于 2025-05-09 16:56:05 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/iteye_17455/article/details/81920994

本文详细介绍了CSS盒子模型的基本概念，包括边框、内边距、外边距等属性，并探讨了不同浏览器（如IE6、IE7、Firefox）下的宽度计算差异及兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下面这个图，这是FireBug下看到的某个标签(Div)的布局图，前端工程师一定不陌生吧。
[img]http://dl.iteye.com/upload/attachment/297224/a1c0f9c6-afa6-3eb6-b82d-a2bf2ce7257d.jpg[/img]

对于div布局，该图对应的属性为：
border：边框
padding:内边距(也称之为”内胆”)
marging:外边距
width:宽
height:高
position:位置
z-index:z(zoom)
其它的标签，可以以此内推，称之为CSS+Div布局的”盒子模型”。
对于FF：一个Div的width值=实际的宽度值+padding值+border值。
而IE6: Div的width值有时是不包括border值的，所以很容易产生页面布局的混乱，所以这是造成要做页面浏览器兼容测试一个原因。
Position为页面元素的定位方式，z-index为页面元素的显示层次值。

对于不同浏览器下，页面的显示会有不同的问题，所以有了针对浏览器兼容性的CSS hack技术，即：
IE6，IE7，IE8能识别*，FF不能识别*
IE6能识别*，不能识别 !important
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important
例：
IE6，IE7 识别*width：10px，FF识别width：10px
当然，IE6，IE7也是识别width：10px的。
IE7，FF识别 width：10px !important，但IE6是不识别的。
另外IE6对下划线“_”也是能识别的，但IE7和FF是不识别的。
所以，在书写CSS时，带“*，!important”和不带符号的属性的书写顺序是有技巧的^_^。
附CSS浏览器兼容表： http://www.div-css.com/f/info/css-hack-list.gif