zoukankan      html  css  js  c++  java
  • 关于DIV多层嵌套的margin-top的BUG

    今天在做登录页面的时候发现个margin-top的bug ;

    初始代码如下:

    html:

    <div class="logo"></div>
    	<div class="login_text">
    	<div id="error" class="errorstyle"></div>
    </div>

    css:

    .errorstyle {
         height:20px;
         225px;
         background-color:#FFCCCC;
         color:#F00;
         font-size:12px;
         border:#FF0000 solid 1px;
         margin-top:10px;  /* 注意这里 */
     }

    结果发现IE6.IE7正常,ie8,FF显示错误。

    症结:当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。

    解决方案:

    1、使用浮动来解决,即将子层代码改为:

    .errorstyle {
         height:20px;
         225px;
         background-color:#FFCCCC;
         color:#F00;
         font-size:12px;
         border:#FF0000 solid 1px;
         margin-left:90px;
         display:inline;
         /* 以下代码修正FF和ie8的margin-top bug */
         margin-top:10px;
         float:left;
    
    }

    2、使用padding-top来解决(因为FF盒模型问题,不推荐使用)

    OK,一切都好了~


    其实这个是一个外边距叠加的问题,恰恰firefox跟ie8中是正确的,而ie6、7之中是错误的,内部容器的margin与外部叠加,叠加的margin处于容器外部。浮动元素不会产生外边距的叠加,所以间接解决了你遇到的问题。可

    参照文章http://www.52css.com/article.asp?id=1018

  • 相关阅读:
    jsp转向
    什么是 XDoclet?
    tomcat中的几点配置说明
    mysql5问题
    POJ 3734 Blocks
    POJ 2409 Let it Bead
    HDU 1171 Big Event in HDU
    POJ 3046 Ant Counting
    HDU 2082 找单词
    POJ 1286 Necklace of Beads
  • 原文地址:https://www.cnblogs.com/52php/p/5665492.html
Copyright © 2011-2022 走看看