当未指定为display:block时,为什么所有浏览器在HTML5模式下的行为都不同,并且img元素之间的垂直间距不同?
首先,浏览器没有“ HTML5模式”。它们具有三种模式“ Quirks”,“ Limited Quirks”(又称“ Almost
Standards”)和“
Standards”模式。“限制的怪癖”和“标准”模式之间只有一个区别,它与为该坐席所在的线框建立线高和基线的方式有关
<img>。在“有限的怪癖”模式下,如果行上没有呈现的文本内容,则不会建立基线,并且该行
<img>位于行框的底部。
在“标准”模式下,即使该行框中没有实字符,该行框也始终包含基线下方g,p和y之类的字符后裔的空间。您看到的差距是基线之间的距离线框的底部是这些下降器的空间。
因此,补救措施是停止
<img>被视为嵌入式元素
{ display:block; }或覆盖的垂直对齐方式
<img>
{ vertical-align:bottom; }。两者都会起作用。
为什么XHTML Transitional不需要此技巧
使用XHTML Transitional doctype将浏览器置于“有限的怪癖”模式。如果您使用了XHTML Strict或完整的HTML4 Strict
doctype,那么您将看到与HTML5 doctype相同的差距,因为每种方法都将浏览器置于“标准”模式。
为什么XHTML Strict也产生垂直间隙
往上看。
使用img {display:block; }放在reset.css工作表中?
当然,但是有时候您可能希望
<img>被视为内联元素。在这种情况下,您需要在适当的位置添加CSS来实现。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)