下面将浏览器不兼容原因及解决方法整理一下,不足之处以后遇到再继续补充:
1. 文字大小不兼容
同样14px的宋体字,ie下实际占高16px,下留白3px,firefox下实际占高17px,上留白1px,下留白3px。
文字大小不兼容解决方案: 给所有文字设定通用line-height值
2.div高度不兼容
firefox下div容器定义height后,div不会因为内容超出height而撑大,而i6e下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
div高度不兼容解决方案:如果设置高度,需要同时把内容物高度限定,也就是溢出隐藏处理:overflow:hidden;或者当需要随着内容自适应高度,但又想div有一个最小的高度时候,像这样做min-height: 1400px;max-height:none;_height: 1400px;
3.div宽度不兼容
如果div容器设定float浮动但没设定宽度,那么也会出现ie6和firefox的不兼容。firefox下内容会撑开容器渗入它前面的div,ie6下该div内容折行而不是我们想象的与同级div在同一行。
div宽度不兼容解决方案:浮动div容器一般需定义width。
4.div浮动不兼容
当前面div有左浮动和右浮动,下面div就会受他们影响也有浮动。ie也许不用加清除,但firefox下不清除浮动是不行的。
div浮动不兼容解决方案:给下面的div设定清除 clear:both;