inline-block 引发的间隙原因与解决方法
这是一个常见的问题,但是一些新人没遇到过可能不会发现,现在我对这种现在进行了分析与总结
设置一些元素为块级元素时一般这么写
li{display:inline-block; *display:inline; *zoom:1;}
display:inline-block在IE下仅仅是触发了layout,而它本是行布局,触发后,块元素依然还是行布局。所以需让块元素呈递为内联对象,display:inline则起到了这一作用(*号只被ie6、7所识别),然后再通过zoom:1触发layout。即可实现所谓的inline-block。
display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。
常见的解决方法:
1:去除标签段之间的空格,但是会导致HTML标签可读性差
3:标签写成不闭合,省掉尾标签</a>
2:使用margin、word-spacing、letter-spacing负值:负值的大小与上下文的字体和文字大小相关,外部环境的不确定性,以及最后一个元素多出的父值等问题,这个方法不适合大规模使用
4:使用font-size:0,最好的方法父元素font-size:0; 他的作用便是让多余的空白符消失,当然这会造成所有子元素的文本都一同消失,因此你需要再在子元素加一个font-size:12px。
inline-block 引发的间隙原因与解决方法的更多相关文章
- inline-block间隙原因和解决方法(web前端问题)
申明:IE7无法测试,所以下面说的IE6指IE6和IE7 1,遇到的问题 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Styl ...
- inline-block元素间隙问题原因及解决方法
inline-block元素间隙问题原因及解决方法 原因: 书写时由空格.换行或回车所产生空白符所致 解决方法: 方法1:font-size:0 方法2:改变书写方式 方法3:使用margin负值 方 ...
- Nginx 502 Bad Gateway 错误的原因及解决方法
http://my.oschina.net/zhouyuan/blog/118708 刚才在调试程序的时候,居然服务器502错误,昨天晚上也发生了,好像我没有做非常规的操作. 然后网上寻找了下答案, ...
- oracle 索引失效原因及解决方法
oracle 索引失效原因及解决方法 2010年11月26日 星期五 17:10 一.以下的方法会引起索引失效 1,<>2,单独的>,<,(有时会用到,有时不会)3,like ...
- [Python Debug]Kernel Crash While Running Neural Network with Keras|Jupyter Notebook运行Keras服务器宕机原因及解决方法
最近做Machine Learning作业,要在Jupyter Notebook上用Keras搭建Neural Network.结果连最简单的一层神经网络都运行不了,更奇怪的是我先用iris数据集跑了 ...
- coreseek常见错误原因及解决方法
coreseek常见错误原因及解决方法 Coreseek 中文全文检索引擎 Coreseek 是一款中文全文检索/搜索软件,以GPLv2许可协议开源发布,基于Sphinx研发并独立发布,专攻中文搜索和 ...
- .NET 3.5 安装错误的四个原因及解决方法
.net framework 3.5 安装错误的四个常见原因及解决方法,飓风软件站整理,转载请注明. 1.清除所有版本 .NET Framework 安装错误后在系统中遗留的文件: 如果您以往安装过 ...
- Java ConcurrentModificationException异常原因和解决方法
Java ConcurrentModificationException异常原因和解决方法 在前面一篇文章中提到,对Vector.ArrayList在迭代的时候如果同时对其进行修改就会抛出java.u ...
- Nginx 499错误的原因及解决方法
今天进行系统维护,发现了大量的499错误, 499错误 ngx_string(ngx_http_error_495_page), /* 495, https certificate error */n ...
随机推荐
- css让内层div自动撑开外层div
.clear{clear:both;height:0px;font-size: 1px;line-height: 0px;} <div class="audi_items"& ...
- MyEclipse中抽取接口、父类
选中要抽取接口的类-------->Refactor-------->Extact Interface-------->填写抽取的接口名-------->选择要抽取的方法(一般 ...
- C# iframe session 丢失
在页面A中使用iframe引用另一站点页面B,但页面B上面的session总是丢失,百度了一下,不用改程序,直接在iis里面操作,解决方法如下 1.打开IIS管理器 inetmgr 2.选择被嵌入if ...
- jquery源码学习
1,"use strict"; //16行 用在代码开始处,表示之后的代码将按照严格模式执行
- APM浅析
APM(Application Performance Management & Monitoring)一种基于云的性能监控服务(SaaS),以非侵入式监听探针,收集应用关键指标,生成分析报表 ...
- sscanf 解析字符串
test.txt中内容如下所示: eth0||192.168.0.2-192.168.0.150 eth2||192.168.0.2-192.168.0.150 想要将其中的ip地址等解析出来: #i ...
- viewer.js使用
viewer GitHub 地址: JS 版本:https://github.com/fengyuanchen/viewerjs jQuery 版本:https://github.com/fengyu ...
- python入门之字典
1.字典的基本特征: key-value结构 key唯一,必须为不可变数据类型 value可以不唯一 无序 查找速度快 2.创建一个字典: info={“gaohui”:"IT", ...
- Reading CLR via c# 4th Edition
In fact, at runtime, the CLR has no idea which programming language the developer used for thesource ...
- android开发笔记(1)
最近老师要求我们使用android开发一些东西.但是对我们而言,android是一个未知的方面.先说说我对于android的软件的基本认识,首先他很难,因为他是一个未知的领域:其次,我们只是掌握了一些 ...