题
我有我的图像间距问题,当我切换到严格的XHTML DOCTYPE。
下面的代码 - 它使用雅虎的复位样式表来杀死所有的默认浏览器填充 - 叶的大约4个像素下方的两个图像,但之间的间隙只有当我使用严格的DOCTYPE。这是为什么?
这是只有在铬和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>
解决方案
使用彼得的回答作为启动以下的解决了这个问题:
img { vertical-align: bottom }
此工作的原因是,对于vertical-align
默认为baseline
,这相当于在垂吊位下垂“线条以上”的文本的部分(下壳体G,Q等所有挂起该基线下文)。
因此,为了留有余地它离开的空间4像素为这些突出端。
希望有所是有意义的。
编辑:从源网站结果,视觉辅助 结果 <子>(来源: brightlemon.com 一>)子>
其他提示
有关misterious图像间隙的更多信息可在这里找到:
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
在严格的文档类型,图像成为一个内联元件,以及行为像文本。因此,你需要改变它的vertical-align
属性,或改变其显示属性,以display: block
,或display:inline-block
试图排除常见错误,我通过固定不小于8个验证错误所做的代码通过验证。
一般地,如果浏览器不能分析中给出的DOCTYPE文档,结果是不确定的。
它仍然无法正常工作你要知道,但这里的验证代码:
<!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" />
<title>Required</title>
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>
</body>
</html>
在显示:内联块溶液绝对没有为我工作
在垂直对齐:塔底溶液做了工作,但有一点需要注意:根据情况,有我不得不代替设置为垂直对齐的图像:顶
切换到松散的标准,而不是严格的工作对我...保持我所需的IE的格式,但消除了Firefox和铬的奇数图像间距。
https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode
用于行:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">