HTML中图文混合引发莫名空白问题研究
来源:互联网 发布:淘宝店铺首页轮播代码 编辑:程序博客网 时间:2024/06/09 13:49
======================================================
注:本文源代码点此下载
======================================================
html5如火如荼,几个月前的项目要部分应用新技术,尤其是简单的文档类型声明(不区分大小写),非常吸引人。中途因为ie8等在第一次打开网页时会阻止js执行,停在询问页面,导致新的标记无法识别使页面十分混乱而作罢,但doctype的简约定义仍在使用。可是在后续做到上图下文的格式时,发现图片下方会出现莫名空白区域,经验上是没问题的,于是翻来覆去的比对,发现唯一不同只在doctype的定义了,替换成旧版的过渡模式确实就变好了,后来发现设置图片容器的line-height为0也可以,一直对付着用,今天又翻出这个问题,仔细研究下,发现是图片垂直方向对齐方式和line-height共同作用的结果。
测试代码如下:
标记文字(line-height:75px;)
默认表现(firefox下):
图1
可以很明显的看出来和
之间有个明显的间距,大小接近
行高的一半。
如果将包含文字的
修改显示类型为 display:inline-block; ,那么表现如图2:
图2
可以看出图片和文字的对齐方式是图1中图片与文字区域间距的来源。
而间距的大小,则由line-height的值决定,但里面的比例并不是很清楚,大概在不到一半的水平上。这里不再贴图展示,主要讨论图片的垂直对齐方式对问题产生的影响。
图片的vertical-align属性值默认为baseline,测试其他几个属性,分别如下图:
图3(vertical-align:top;)
图4(vertical-align:text-top;)
图5(vertical-align:text-bottom;)
图6(vertical-align:bottom;)
图7(vertical-align:middle;)
就vertical-align的几个值来看,
baseline与text-bottom最接近,但是前者右侧的文字更靠下些。这个特性很多地方都能轻易的看到,如图8插入了表情的微博。开心网的状态和记录对此做了调整;
text-top、text-bottom对齐的是inline包含文字的区域(这个区域不是line-height决定,而是font-size和浏览器对inline区域默认表现共同决定。关于inline区域不同浏览器表现比较复杂,这里不予讨论);
top、bottom、middle可以很好的对图片在一行里的定位精确处理。
图8 第三行明显文字被表情影响了行距(chrome下新浪微博)
综上所述,图片下的莫名占位空白问题是vertical-align属性和line-height值共同决定的,前者是导致问题的原因,后者基本决定空白的大小。
该可以有三种解决办法:
取消这种html5的应用方式,恢复到传统的过渡模式
为设置一个容器,如
,然后设置该容器的line-height:0;
定义图片的vertical-align属性,根据实际情况从top、bottom、middle中选取是比较安全的方式
我只是发现了这个现象,并总结了可能的影响因素,至于为什么在html5模式下表现为这样还不得而知,希望哪位知道的能不辞吝教,欢迎大家指正。
ps: 关于line-height的表现可以看这里:http://www.slideshare.net/maxdesign/line-height
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
- HTML中图文混合引发莫名空白问题研究
- wangEditor编辑器中解析html图文信息问题(三)
- URL大小写引发的问题研究
- android开发中ImageView控件上下空间莫名空白块的原因与解决
- android开发中ImageView控件上下空间莫名空白块的原因与解决
- html显示空白页面的问题
- 解决HTML顶部和两侧空白问题
- Android webview加载html出现空白问题
- html中后台动态绑定数据表格存在空白单元格问题
- 关于html中charset与<title>位置不同页面空白的问题及解决方法
- jpa+spring jdbc混合作战引发的缓存问题
- tomcat安装中遇到的莫名奇妙的问题
- 阿里weex研究iOS(一)playground内容空白问题
- Photoshop中27种图层混合模式原理图文详解
- Android用Kotlin语言设置 TextView中图文混合排列
- 莫名奇妙的问题
- 莫名404问题
- js中空白节点的问题
- java编程思想chapter3
- ListBox第一行字体比其他行小的问题,delphi要不要打包
- java 基础复习
- Silverlight实用窍门系列:22.Silverlight使用WebService调用C++,Delphi编写的DLL文件【实例源码下载】
- Windows8开发指南(3)Windows8开发工具
- HTML中图文混合引发莫名空白问题研究
- 正确认识ajax!必读!
- 中文参数传递编码后传递乱码解决(java.net.URLEncoder.encode)
- AJAX简介(转)
- javascript事件监听
- 你真的懂HTML吗-从"最新闪存"说起
- 四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比
- 有感于几位大大关于AJAX的讨论....
- Delphi - 使用字符串时,一个注意地方