zoukankan      html  css  js  c++  java
  • 不让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/
    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    CSV 文件的读写(函数)
    携带cookies请求github个人信息(类封装)
    网络和http协议理论
    思卡乐科技发布SR3系列RFID产品
    爱立信开始大规模mesh网络测试
    NB-IoT物联网,来了
    想象力是我们的局限,蓝牙5应用初探
    RFID电动车管理,智慧城市物联网建设的入口
    蓝牙模块选择经验谈
    RFID电动自行车与共享单车之物联网比较
  • 原文地址:https://www.cnblogs.com/kissazi2/p/2532383.html
Copyright © 2011-2022 走看看