这是我的
HTML代码
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
我的CSS：
#div1 {
width:150px;height:100px;white-space:nowrap;
border:blue 1px solid;padding:5px;
}
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
}
如果我插入<！DOCTYPE html>在< html>之前标签,页面将如下所示：
但是如果我删除<！DOCTYPE html>标签之间,两行之间的“空白”将被删除
但是我想使用<！DOCTYPE html>标签,它是推荐,但我找不到任何可以删除该空格的CSS规则,我已经使用margin：0; outline：none;等等,但它不工作,任何人都帮助我.谢谢！(我不擅长英文…)
解决方法
解决这个问题的最简单的方法是将vertical-align：top属性应用于CSS规则：
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
vertical-align: top;
}
如果要将内容添加到div中,则使用line-height：0或font-size：0会导致文本布局出现问题.
见小提琴：http://jsfiddle.net/audetwebdesign/eJqaZ/
这个问题来自哪里
当浏览器处于“怪癖”模式时,可能会出现此问题.在这个例子中,改变
来自：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
至
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
将会改变浏览器如何处理额外的空白.
在怪癖模式下,空格被忽略,但以严格模式保留.
参考文献：
https://developer.mozilla.org/en/Images,_and_Mysterious_Gaps
