严格的DOCTYPE影响图像之间的间距
当我切换到XHTML Strict DOCTYPE时,我的图像间距有问题.
下面的代码 - 使用Yahoo的重置样式表来消除所有默认的浏览器填充 - 在下面的两个图像之间留下大约4个像素的间隙,但仅当我使用严格的doctype时.为什么是这样？
这只是Chrome和Firefox中的一个问题.IE不会在两个图像之间显示单个像素.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
</body>
</html>
All*_*nde 14
使用Peter的答案作为开始,以下问题解决了这个问题:
img { vertical-align: bottom }
这样做的原因是,默认vertical-align值为is baseline,这相当于文本"行上方"的部分,其中dangly位挂起(小写g,q等都挂在此基线之下).
因此,为了留出空间,这些悬空留下4px的空间.
希望有道理.
编辑:来自源站点的视觉辅助
(来源:brightlemon.com)
| 归档时间： |
|
| 查看次数： |
5702 次 |
| 最近记录： |