西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发其它知识 → Div相互重叠、DIV错位的解决方案

Div相互重叠、DIV错位的解决方案

相关软件相关文章发表评论 来源:西西整理时间:2012/6/3 9:55:54字体大小:A-A+

作者:佚名点击:541次评论:0次标签: Div

  • 类型:源码相关大小:11.3M语言:中文 评分:5.0
  • 标签:
立即下载

今天,在用不同的浏览器测试自己做的一个平台时,发现了一个比较诡异的问题。在IE下显示正常的两个DIV,在Chrome下竟然发生了错位。

在IE下显示正常

Chrome下,错位了...

让我们仔细看一下不和谐的现象

解决的思路:

1、百度一下(为什么不同的DIV会重叠)

2、用Chrome下的调试工具,发现问题

那些百度上的答案

虽然不能解决我的问题,但是这是一个解决DIV错位的方法,也贴出来

相关链接

自己动手分析了

1、首先,让我们用Chrome下的审查元素功能,快速定位一下出问题的地方,以便找出他的对应的Css进行分析。这个审查元素的功能还能够很方便的帮我们辨认出一个HTML控件占整个页面的空间。

2、从上图中看出了点端倪了吧?带有国家、省、市的Div块中理论上要有两行,但是Chrome定位的大小却只有一行。再看看对应的Css

3、从控件块的Css看,原来是Height被定死了。那么把HeightX2不就行了。但是,如果屏幕的分辨率又变一下,还是会错位啊。。那么采用相对布局吧?那么将绝对的高度改成Position:Reletive。再试试。。。

4、让我们一起分享解决问题的喜悦吧?世界终于从混沌中分清了。。。

总结:

1、chrome的审查元素是一个好功能,能够帮我们快速定位元素的CSS。

2、IE很强大,能够自动解决布局重叠的问题。

3、界面中尽量用相对布局,以避免不同浏览器,不同分辨率显示的差异。

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)