欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

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

雨夜 4025次浏览 2个评论

前段时间就发现本站涂涂研版(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)自由拉伸变换页面,全通过,成功了,在这里再次谢谢博友林肆和苹果园子的文章。

 


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2) 个小伙伴在吐槽
  1. 其实,我是来看技术的,嘿嘿!学的挺快~
    林肆 2014-02-18 AM 06:43 回复
  2. 哈哈,过来回复下了。
    烂番茄网 2014-02-15 PM 08:16 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们