涂涂研版

  1. 涂涂研版首页
  2. 教程、积累

css+div错位问题的修复小结

雨夜 • • 教程、积累

前段时间就发现本站涂涂研版（z-blog）在手机上浏览本小站的时候就会发现电脑版错位现象，以及今天博友林肆告诉我说用电脑浏览本站的时候：全屏不会出现css+div错位的现象，但是窗口化的时候，尤其是拖拉浏览器大小的时候就会出现严重错位的现象。由于昨晚上夜班，所以就想睡会，但是怎么也睡不着，算了吧，起来解决问题，于是开始解决：

 

1.由于不熟悉css，所以改起来有点难，也算是学习吧，在网上查找资料，功夫不负有心人，让我找到了，我是借鉴了苹果园子的文章：DIV+CSS让整个网页框架垂直居中显示

方法：要实现功能必须先建立一个容器(margin:0px auto; width:900px; position:relative;)，上下边界设置为0，左右页面空白自适应并且相等，可以达到横向居中的效果

但是容器宽度是984px;关于设置position:relative;我也不理解，但是如果设置是absolute和fix时候就会出现问题，不用它时候也正常显示页面（我的网站页面），其他div属性可以根据父级对象容器的设置子级对象属性。

2.将css文件中关于footer的margin-left的属性删除。

3.修改完成后，上传，发现以前做的简繁体切换出现了异常，位置发生错位了，于是找到相关属性设置，以前设置的在原有错位的基础上做的（之前不知道，呵呵），现在处理好了，于是就把以前的定位（margin-left）给删除，使用float：right定位，保存，刷新看下。

4.问题又来了，简繁体切换几个字和头部模板发生重叠现象了，于是查看头部代码，由于css文件使用了float了，所以使用在头部模板文件里的简繁体代码后面加上一句<div class="clear"></div>清除浮动就可以了。

5.保存。刷新缓存（用全动态测试），刷新页面，成功了。

6.实验，三个浏览器（火狐，谷歌，IE11）自由拉伸变换页面，全通过，成功了，在这里再次谢谢博友林肆和苹果园子的文章。

 

赞 (0)
打赏 微信扫一扫 微信扫一扫
雨夜雨夜认证作者
55882

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请通知我们，一经查实，本站将立刻删除。


客服