不让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、界面中尽量用相对布局，以避免不同浏览器，不同分辨率显示的差异。