span i等行内元素之间出现的诡异间隔
来源:互联网 发布:iphone照片导入mac air 编辑:程序博客网 时间:2024/05/10 06:54
最近在做的一个项目里面碰到这么一个问题:
<p> <span>块1</span> <span>块2</span></p>
在“块1”和“块2”之间存在着一个大概3em的空白...图就不上了
这明显不符合预期....
最后发现:当这两个span写在一行...问题就解决了...
<p> <span>块1</span><span>块2</span></p>
原因在于 行内元素之间在换行时会产生一个换行符号,然后会占用一定的宽度...
同理 i s之类的行内元素也是会存在一样的问题
并且这个宽度是小于一个空格的...
在此记录一下这个浪费了我一天时间的问题- -!歌以咏志
=======7月8日更新=======
之前的解决方法是,把所有的span都写到一行,这当然是最稳妥的做法,但是带来的麻烦肯定是有的...这意味着需要书写一行特别特别长的代码,按照代码规范来看,一行代码是最好不要超过50还是200个字符来着....(具体请参阅efe代码规范)
所以有三种解决方法:
1、在js里拼接好字符串后再通过innerHtml方法显示出来
2、这个空白貌似确实就是3em大小,所以只要设置span的margin-right: -3em即可,亲测有效,唯一不爽的地方是,如果行内存在i s em之类其他的元素,每个元素都得设置一下margin-right,并不是很爽= =!
3、换行符号的宽度是由所在标签的字体大小有关,以上面的代码为例,p的font-size越大,块1与块2之间的空白就越宽,反之则越小。
所以解决方案就是:将p的font-size设为0即可。
但是,忘了是在哪里看到的一篇文章表示,有的浏览器不支持font-size: 0,目测应该是万恶的旧版IE... 所以在这种情况下,选择js拼接是比较好的,但是如果做的HTML5开发,特别是Web App开发,那移动端的浏览器肯定是支持font-size 0的啦。
=======再补充========
这种方法算是奇技淫巧....
<p> <span>块1</span ><span>块2</span ><span>块3</span></p><p> <span>块1</span><!----><span>块2</span><!----><span>块3</span></p>半夜睡不着在网上看到的...这样奇奇怪怪的写法也是能够保证这三个span都在同一行里...
撒由那拉~
- span i等行内元素之间出现的诡异间隔
- 解决行内元素之间的间隔bug问题
- span 换行出现的间隔
- span 换行出现的间隔
- <span>行内组合元素
- span创建行内元素
- span用法:用于组合行内元素
- 行内元素水平间隔有关问题
- 行内元素span和块级元素div的区别
- CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中
- 行内元素出现换行的情况
- 行内元素与块元素之间的转换
- 行内元素与块元素之间的转换
- span元素之间空隙问题
- 行内标签a,span等调整高宽的方案
- IE6 BUG诡异的行内替换元素设置浮动并设置text-indent:xx px 影响相邻元素布局
- 去除span;div...之间的空格,为什么会出现空格
- 行内元素水平之间的margin与块状元素之间的竖直margin
- 神话电视剧配乐
- 学习资源
- 排列数与组合数
- Firefly3288—Lubuntu显示0-4串口设备
- 切圆方法
- span i等行内元素之间出现的诡异间隔
- WinCE6.0学习之EBoot源码分析----startup.s
- 第14周-输入输出流,文本文件-项目0-课后实践·程序阅读5
- 终极DIY双面材质攻略
- xml
- PHP ::DocumentRoot don't have permission to access
- 几个 Spotlight的下载地址和注册码
- Leetcode之word search
- 线段相交的判断