• 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 中,恩,问题是解决了。

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

    确保布局稳定。

  • 相关阅读:
    罗马数字转换成整数
    整数转换成罗马数字
    hdu 5050 大数
    hdu 5051 找规律?+大trick
    hdu 5055
    hdu 5054
    hdu 5058 set应用
    hdu 5056 所有字母数都<=k的子串数目
    hdu 5059 简单字符串处理
    hdu 5060 五种情况求圆柱体与球体交
  • 原文地址:https://www.cnblogs.com/AlexBlogs/p/5472894.html
Copyright © 2020-2023  润新知