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