完美解决css盒模型的四大兼容性问题.docx

完美解决Css盒模型的四大兼容性问题 Css盒模型包括6个基本属性，其中 width和height属性定义内容区域的宽度和高度，在 内容区域的外面包括了三层界面属性 paddi ng,border,margi n, 在使用这个盒内使 用background 属性填充padding 和内容区域的背景。 现在基本上所以的浏览器都主动向 css标准靠拢，在支持 css2 css3方面都有很多努力。在 微软推出ie8以上的版本中可以说是彻底的支持了 css2标准。 下面我们介绍一下几个盒模型应用时经常遇到的几个问题 1 ie元素浮动时边界误差问题 在ie6浏览器预览浮动元素时， 浮动的边界实际显示为指定边界的 2倍，对于ie6边界的显 示错误，我们可以设置浮动元素的 display属性为inline,这样就可以避免边界加倍显示的问 题。 2非ie浏览器中怎么让父级元素适应子元素高度 在非ie浏览器中，怎么让父级元素的高度随子元素的高度自适应变化呢？ 首先我们需要定义父级元素的 overflow属性，并且显示声明父级元素自适应调整陶都。 我们来看看目前哪些浏览器能解析自适应高度，非 ie浏览器如opera,ntescape,firefox 这 些都不能够解析，而ie7取消了元素高度自适应；所以，我们为了实现自适应高度，应该增 加overflow:auto 的声明，但为了与ie不同版本解析兼容， 我们还必须增加一个辅助元素， 定义clear:both 属性，这样就强制了元素的高度。 3元素低边界不被解析 在css规定中，没有定义float属性的父元素不会自动计算高度，要让其计算出高度，就必 须在子元素的最后添加一个辅助元素，并且设置 clear:both 。所以，我们不能设置父元素 overflow:auto 属性，而是要设置成父元素浮动属性 float:left 或者float:right. 4子元素在ie溢出 对于这个问题，子元素在 ie中溢出，我们可以使用 cssheck技巧，我们可以通过定义一个 单独在ie浏览器中被解析的样式，如 1px,解析父元素的继承性。 上面的四点式盒模型中嵌套父子元素、相邻关系中一个 css应用中的难点。当我们使用 display属性不一致时，错乱与兼容性问题就时常困扰着我们，就要我们在不断的实践中融 会贯通，多多练习！