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

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

    确保布局稳定。

  • 相关阅读:
    CCDictionary 用调试器查看问题
    博客 小记
    cocos2d-x 调试问题
    string知识
    静动态库
    fedora 20安装vim Transaction check error
    PyQt中ui编译成窗体.py,中文乱码
    centos编译安装vim7.4
    linux c驴杂记
    c++指针 c指针 改变值
  • 原文地址:https://www.cnblogs.com/AlexBlogs/p/5472894.html
Copyright © 2020-2023  润新知