zoukankan      html  css  js  c++  java
  • Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug

     

    Container: padding: 20px;
    Float
    Float
    Clear

    在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。

    如果你分别在IE和Firefox中查看右边的示例,你就会看到,在Firfox 中跟我我们预期的表现是一样的,只有外层容器和DIV之间有padding;而在IE中,回有一个20px间隙在浮动的DIV和有clear属性的DIV之间。

    只是示范用到的代码:

    <div style="padding: 20px;">

    Container: padding: 20px; 

    <div style="float:left; 50%; background: green; color: white;">

    Float 

    </div><div style="float:right; 50%; background: blue; color: white;">

    Float 

    </div>

    解决这个问题的方法就是放弃使用最外层DIV容器的顶部和底部padding,该由内部DIV的顶部和底部margin来时实现。这样最终的效果在IE和Firefox中就是一样的。

  • 相关阅读:
    图->存储结构->十字链表
    图->存储结构->邻接表
    P2278-[HNOI2003]操作系统
    P1801-黑匣子_NOI导刊2010提高(06)
    P1197-[JSOI2008]星球大战
    P2024- [NOI2001]食物链
    P1111-修复公路
    ACM模板——二分图匹配
    P2055-[ZJOI2009]假期的宿舍
    ACM模板——强连通分量
  • 原文地址:https://www.cnblogs.com/DotNetNuke/p/1409834.html
Copyright © 2011-2022 走看看