e77乐彩

为企业提供网站平台解决方案

178 7892 1916

QQ客服:点击这里给我发消息 点击这里给我发消息

最新动态:

常见问题

你的位置:e77乐彩 > 建站知识 > 常见问题 > html5图片img间隙解决方法

html5图片img间隙解决方法

发布时间:2014-01-20 17:31作者:桂林蚂蚁网络网址:728601263.cn浏览:
同学都知道其中有个观点,那就是html5的头部doctype仅仅是针对验证器的,而对于IE则是让其按照标准模式表现的标记。 事实上标准浏览器在是否加doctype是一样的。 但其实这其中还是有所差异,不知道是否是浏览器刻意而为还是什么原因,但它就是存在。 使用老式html/xhtml的
同学都知道其中有个观点,那就是html5的头部doctype仅仅是针对验证器的,而对于IE则是让其按照标准模式表现的标记。
事实上标准浏览器在是否加doctype是一样的。
但其实这其中还是有所差异,不知道是否是浏览器刻意而为还是什么原因,但它就是存在。
使用老式html/xhtml的docytpe和html5的doctype的确存在细微差异
大家还记得图片底部那3px的空隙么,可能有些同学纳闷,那个空隙好像有些时候有有些时候没有,没错,这个区别就在于doctype。
我们来看两个例子:
xhtml:
html5:

 
请用火狐/chrome/ie8以上观看,我发现在使用xhtml形式的doctype或者更老的html甚至不加doctype,在这些浏览器里图片下面的3px间隙消失了。而在html5下却又出现了
原来 html5 doctype激活 standard mode,xhtml1.0激活almost standard mode(限制性quick mode)
这里有一个详细的列表来阐述两者的区别。
其中提到了在quirks mode下img默认是block(去掉img下3px间隙的解决办法之一)的,所以导致上面大家所见的。

解决方案:给图片加上style="display:block;"
img src="images/opp7。png" style="display:block;"/>
<img src="images/opp8。png" style="display:block;"/>
<img src="images/opp9.png" style="display:block;"/>
<img src="images/opp10.png" style="display:block;"/>