HTML中图文混合引发莫名空白问题研究

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:30 我要评论(0)

HTML5如火如荼,几个月前的项目要部分应用新技术,尤其是简单的文档类型声明<!DOCTYPE html>(不区分大小写),非常吸引人。中途因为IE8等在第一次打开网页时会阻止js执行,停在询问页面,导致新的标记无法识别使页面十分混乱而作罢,但doctype的简约定义仍在使用。可是在后续做到上图下文的格式时,发现图片下方会出现莫名空白区域,经验上是没问题的,于是翻来覆去的比对,发现唯一不同只在doctype的定义了,替换成旧版的过渡模式确实就变好了,后来发现设置图片容器的line-height为0也可以,一直对付着用,今天又翻出这个问题,仔细研究下,发现是图片垂直方向对齐方式和line-height共同作用的结果。

测试代码如下:

view sourceprint?

<style type="text/css教程">

img,div,span{border:none;padding:0;margin:0;}

.example_box{line-height:75px;width:500px;background-color:#eee;border:10px solid #f60;}

.example_box div{background-color:#690;}

.example_box span{font-size:16px;background-color:#d40;}

</style>

<div class="example_box">

<img src="photo/image5.jpg" height="150" alt=""/>

<div>

<span>标记文字(line-height:75px;)</span>

</div>

</div>

默认表现(Firefox下):

firefox下默认表现" src="http://filesimg.111cn.net/2011/05/20110803091043272.jpg" />

图1

可以很明显的看出来<img/>和<div/>之间有个明显的间距,大小接近<div/>行高的一半。

如果将包含文字的<div/>修改显示类型为 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区域不同浏览器表现比较复杂,这里不予讨论);

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...