css样式浏览器兼容问题

《css样式浏览器兼容问题》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、一、overflow解决float浮动后高度自适应问题发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可overflow:auto；zoom:1；overflow:auto；是让高度自适应，zoom:1；是为了兼容IE6，也可以用height:1%；的方式来解决。二、CSS清理浮动方式1.清理浮动有很多种方式，像使用br标签自带的clear属，使用元素的overflow，

2、使用空标签来设置clear:both等等。2.考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。/*清理浮动*/.clearfix:after{visibility:hidden； display:block；font-size:0；content:""；clear:both；height:0；}.clearfix{zoom:1；}其原理是，在「高级」浏览器中使用:after伪类在浮动块后面加上一个非display:none的不可见块状内容来，并给它设置clear:both来清理浮动。在ie6和7中给浮动块添加haslayout来让浮动块撑高并正常影响文档流。上面的代码应该

3、是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在，NicolasGallagher给出了一个更简洁的方案：.cf:before,.cf:after{content:""；display:table；}.cf:after{clear:both；}.cf{zoom:1；}原理还是一样的。使用:after伪类来提供浮动块后的clear:both。不同的是，隐藏这个空白使用的是display:table。而不是设置visibility:hidden；height:0；font-size:0；这样的hack。值得注意的是这里中的:before伪类。其实他是来用处理top-margin边折

4、叠的，跟清理浮动没有多大的关系。但因为浮动会创建blockformattingcontext，这样浮动元素上的另而一元素上如果刚好有margin-bottom而这个浮动元素刚好有margin-top的话，应该让他们不折叠（虽然这种情况并不常见）。3.在网页中，DIV一般都是嵌套的，外面称为窗口，里面的DIV存放内容，如果不浮动的话，如下面这段代码Contenthere