我的目标是在我正在处理的这个页面上使用XHTML 1.0 Strict DOCTYPE,但我遇到了一些奇怪的设计问题..
我有以下代码:
<div><img src="photos/someimage.jpg" alt="Title" /></div>
当我将DOCTYPE设置为1.0 Strict时加载页面时,在div中的图像下方添加一点间距。我删除了代码中的所有空格/换行符,这似乎是此类问题的常见罪魁祸首。如果我将DOCTYPE更改为1.0 Transitional,则间距消失,页面看起来应该如此。
任何人都知道在使用1.0 Strict时避免此问题的方法吗?
谢谢你的时间!
答案 0 :(得分:20)
http://www.schoonzie.com/rogue-padding-below-images
如果图像以内嵌方式显示,则会在其下方留下一些空间。这是因为图像放置在文本的基线上,并且在基线下方应该有更多的空间用于下降字符,如g,j或q。
分支是在严格模式下,不可能使容器紧紧围绕图像,除非你明确地说img {display:block}。
https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps
另一个主要选择是保持图像内联并改变图像相对于线框的垂直对齐方式。例如,您可以尝试以下操作:
div img {vertical-align: bottom;}
答案 1 :(得分:1)
试试这个
<div style="font-size: 0px;"><img src="photos/someimage.jpg" alt="Title" /></div>