不让Div相互重叠的解决办法

      今天,在用不同的浏览器测试自己做的一个平台时,发现了一个比较诡异的问题。在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、界面中尽量用相对布局,以避免不同浏览器,不同分辨率显示的差异。


作者:kissazi2
出处:http://www.cnblogs.com/kissazi2/
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

原文地址:https://www.cnblogs.com/kissazi2/p/2532383.html