firefox 中碰到的一个小坑

情况描述：

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

上代码

HTML：

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

CSS：

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

显示情况

在chrome和IE中是这个样子的

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

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

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

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

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

确保布局稳定。

转载于:https://www.cnblogs.com/AlexBlogs/p/5472894.html

firefox 中碰到的一个小坑相关推荐

NET中dictionary的一个小坑
2019独角兽企业重金招聘Python工程师标准>>> 问题描述:前段时间做个东西,打算在dictionary上按顺序扫描,不复合key条件的元素移动到末尾,然后减少计数,计算下一 ...
mysql内核测试,MySQL 5.7内核复制中的一个小坑
问题背景最近在写一个作为MySQL Slave的角色的程序,连接到MySQL Master使用MySQL复制协议来Dump Binlog事件流.很自然,这个程序在第一次运行的时候,其事务GTIDSe ...
[LeetCode]29 两数相除和一个小坑点
给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符.返回被除数 dividend 除以除数 divisor 得到的商.示例 1:输入: ...
parallel的一个小坑
parallel介绍 parallel是一个很好用的linux并行软件,与linux自带的xargs功能类似,但比它更好用,关于parallel的安装及具体用法可以参考该文章:15分钟神器gnu pa ...
golang原生库mime/multipart上传formdata文件的一个小坑unexpected EOF
golang原生库mime/multipart上传formdata文件的一个小坑unexpected EOF 遇到的问题问题代码问题分析正确代码总结遇到的问题用mime/multipart ...
c 语言for 循环大到小,C语言中for循环问题（一个小坑需注意）
今天分享一下C语言中的for循环中我们常常忽略的小问题. 举一个小例子来说明,大家也可以自己先算一下哦 #define _CRT_SECURE_NO_WARNINGS #include #includ ...
Rocksdb Slice使用中的一个小坑
本文记录一下使用Rocksdb Slice过程中的一个小小坑,差点没一口老血吐出来. rocksdb的Slice 数据结构是一个小型得不可变类string数据结构,设计出来的目的是为了保证rocksd ...
集合覆盖模型例题_在打CodeForces的过程中发现的一个小模型
不久前的Grakn Forces 2020上,我想出了这个方法,我本来以为这个模型不会很常见.然而,今天的CodeForces #679 Div2上,我第二次碰到了可以用这个模型解决的问题,气人的是, ...
centos7网卡编辑_CentOS7网卡命名中碰到的一个坑
以下内容转自公众号:云技术实践(ID:kvm_virt) 环境描述: 碰到CentOS7命名机制的问题缘于测试cloudstack4.5.1版本,架构为管理节点采用cloudstack的4.5.1_E ...

firefox 中碰到的一个小坑

firefox 中碰到的一个小坑相关推荐

最新文章

热门文章