XHTML 1.0 Strict中图像下方的不需要的间距

我的目标是在我正在研究的这个页面上使用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时避免此问题的方法吗?

谢谢你的时间!

解决方法

http://www.schoonzie.com/rogue-padding-below-images

If an image is displayed inline,it leaves a slight space below it. This is because the image is placed on the baseline of the text,and below the baseline there should be some more space for the descender characters like g,j or q.

The offshoot is that in strict mode it’s not possible to make a container fit tightly around the image,unless,of course,you explicitly say img {display: block}.

https://developer.mozilla.org/en/images,_and_mysterious_gaps

The other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line Box. For example,you Could try the following:

06000

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些