设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > 网页错位解决方案_div+css 学习笔记(十一)
网页错位解决方案_div+css 学习笔记(十一)
发布时间: 2014-06-04

常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去。


常见DIV+CSS网页错位问题

  造成DIV CSS网页错位的原因大概有两种情况,一种是宽度计算错误,一种是IE BUG造成,特别是IE6和IE7。接下来我们挨着为大家介绍错位与解决错位方法。

  一、宽度计算错误解决方法  

  宽度计算错误,假如总宽度为500px,有3个盒子,分别css宽度为200px、200px、100px,这个没问题会在一排显示不会错位,但如果加入了css边框、padding、margin属性时,别忘记这几个属性所占的宽度。特别是padding与边框border占用宽度空间不要忽略了。如果有一个盒子加入左右边框,这个时候有一个盒子中刚合适的宽度条件下减少2px边框占用宽度,否则即会总3个盒子合计宽度大于了总宽度,造成错位。

 


二、解决CSS网页错位总体思路

1、遇到在不同版本浏览器中显示高矮不一可以使用CSS hack来解决
2、如果左右结构网页布局成了上下结构布局。解决方法是检查float浮动是否设置好;检查左右宽度是否计算正确,是否是设置左右宽度大于了总宽度导致的上下结构;div开始与div结束包含是否正确,可以使用设置border边框来验证,是否少了div标签结束或多了div。
3、字体高度不一致,有没有设置line-height或height属性来控制字行间距、CSS 字间距。
4、可能是你CSS 注释有问题。



文章来源:森动网小鱼儿,转载请注明出处!