网页设计如何解决兼容性问题

网页设计如何解决兼容性问题

网页设计如何解决兼容性问题？firefox下div容器定义height后，div不会因为内容超出height而撑大，而i6e下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。下面介绍网页设计如何解决兼容性问题，希望对您有所帮助。

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;

5. double-margin不兼容

ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决方案：给浮动容器定义display:inline。

6. mirror margin不兼容

当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px.padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

解决方案：外层元素设定border 或设定float。

7.吞吃现象

还是ie6，上下两个div，上面div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。

解决方案：使用zoom:1.这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug

多出来的一只猪，这是前人总结这个bug使用的比喻。ie6下这个bug，大家会在页面看到猪字出现两遍，重复内容量因注释的多少而变。

解决方案：用" picRotate start "方法写注释。

      注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-61486.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注网页制作频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050