zoukankan      html  css  js  c++  java
  • firefox 中碰到的一个小坑

    情况描述:

    在一个处于正常文档流的div中,里面有一部分文字,还有个有浮动的块,

    上代码

    HTML:

    <div class="container">
       this is float word
       <div class="right">rightarea</div>
    </div>

    CSS:

    .container{
    float: left;
    300px;
    height: 200px;
    background-color: #f1f1f1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    .left{
    display: inline;
    200px;
    background:#AAA;
    }
    .right{
    float: right;
    40px;
    background:blue;
    }

    显示情况

    在chrome和IE中是这个样子的

    对,没错,这是我想要的结果,但是,firefox中是这个样子的,

    我就纳闷了,连IE都玩的好好的,你牛逼哄哄的FF怎么乱套了,哎,没有选择,解决!

    由于一眼找不出什么毛病,清除浮动啥的都有,然后我就一个个的排查,最后发现有这么个东西影响着布局,white-space

    把这个属性去掉,布局就正常了,于是我把后面这三句在父元素的代码移到了 .right 中,恩,问题是解决了。

    不过还是劝同志们,除非你肯定左边这些文字占的宽度绝对碰不到右边的块,不然你还是乖乖的把左边也包起来,写个左浮动,这样

    确保布局稳定。

  • 相关阅读:
    ZOJ 1002 Fire Net
    Uva 12889 One-Two-Three
    URAL 1881 Long problem statement
    URAL 1880 Psych Up's Eigenvalues
    URAL 1877 Bicycle Codes
    URAL 1876 Centipede's Morning
    URAL 1873. GOV Chronicles
    Uva 839 Not so Mobile
    Uva 679 Dropping Balls
    An ac a day,keep wa away
  • 原文地址:https://www.cnblogs.com/AlexBlogs/p/5472894.html
Copyright © 2011-2022 走看看