整理解决一些 DIV+CSS 应用中的问题

制作页面的过程中总是碰到div + css 浏览器兼容性问题,每次碰到问题都上网查资料,比较影响工作效率,今天下决心把这些知识都整理整理,以便提高工作效率.虽然网上有朋友整理过,但是还是希望自己能有深入的理解。
首先整理下各个浏览器之间的区别:
1.margin 加倍问题：　　
现象:对象设置float,并且设置了margin ,IE6下,边距为设置值的2倍,边距是对于父对象的边距,同级对象之间无此问题;
原因:IE6解析问题;
解决:设置对象display:inline;
例子:
margin 加倍问题
2.div的垂直居中问题:
现象:div内容垂直居中设置无效
解决:vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行,事实上实现的原理就是一个div只有一行,每行高就是div的高,然后居中显示就ok了.
例子:
内容垂直居中显示
3 IE 宽度和高度的问题
现象:IE不认识min-height 和 min-width 两个属性,但是IE是自动随内容扩展的,而FF是会将溢出内容隐藏;如果给对象设置min-height 和 min-width 等于没有设置高度和宽度.没有设置float:left 的情况下,设不设min-width没区别,但是min-height有作用,设置float:left以后min-width 有差别;
例子:
IE最小高度宽度问题
说明:html>body: >是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2。IE6不识别此选择符,故以设置FF达到相同效果;
4 页面的最小宽度
现象:因为浏览器大小不同,经常要给网页设置最小宽度,以适应不同的浏览器,给body设置最小宽度min-width在FF里是起作用的,但是IE里没有效果;
解决:在IE下最外层加一个div,用JavaScript解决;
例子:
页面最小宽度
说明:在页面内容为空的情况下(当然这种情况基本不可能出现,在实验过程中发现的),min-width是不起作用的.
width:expression(document.body.clientWidth <= 800? "800px": "auto" ); 不不加等号居然导致浏览器死掉崩溃,不明白原因;


posted @ 2009-08-02 22:29  蜘蛛虾  阅读(391)  评论(1)  编辑  收藏  举报