随着web2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+css制作方法,这种组合的布局形式好处显而易见,这里就不多说。今天主要和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对大家的学习有所帮助。
一、常见DIV+CSS网页错位问题
通过实践摸索及与相关从业人员交流,课课家网站对一些常见的网页错位现象作了总结,大概有以下几方面:
1.文字在不同浏览器中高度不一。
2.本来是设置了左右结构布局的网页,在浏览器上变为上下结构布局。
3.网页在某版本的浏览器中显示正常,但其他版本浏览器显示错位。
二、解决思路
1.总体思路
遇到网页错位问题,我们的总体解决思路是:首先检查我们书写的CSS代码否有问题,尤其是CSS注释方面。当确保我们的代码书写没有问题时吗,可能就是浏览器兼容问题了,这时我们可以使用CSS hack来解决。
2.解决文字在不同浏览器中高度不一的方法
文字在不同浏览器中高度不一,通常是由于我们字行间距设置出现问题。这个问题非常容易解决,只需设置相对应的line-height或height属性来控制字行间距即可。
3.如何解决左右结构布局在浏览器上变为上下结构布局
这个问题是设置的左右宽度大于总宽度,把本应float;right的div挤了下去导致的。所以解决的方法是检查float浮动是否设置好;检查左右宽度是否计算正确,是否为宽度、边框、paddind、margin之和;div开始与div结束包含是否正确,是否少了div标签结束或多了div。
以上就是课课家网站为大家总结的常见DIV+CSS网页错位问题及解决方法,虽然很简单,但简单的过程中其实暗藏玄机,如果大家喜欢还请记得收藏喔!