我正在尝试创建一个布局,其中div之间的垂直间距是像素完美.到目前为止,我已经排除了几乎所有的大网格系统(960.gs,Blueprint),因为它们根本没有解决垂直间距的问题.使用它们,设置div之间垂直间距的唯一方法是使用body {line-height}属性并使用它来操纵div间距.我不会称之为解决方案,因为它会破坏您的模板,取决于font-family,并且不允许您为不同的div使用不同的间距.
我发现唯一一个对垂直间距有适当支持的网格系统是Golden Grid,它不使用body {line-height},但它有自己的.clear {height:5px}用于垂直间距.
我的问题是无论我如何尝试,我都无法在HTML5中使用间距.我说的是垂直排列的图像,它们之间没有间隙.在XHTML过渡模式中,一切都很完美,图像完美对齐,但在HTML5模式下,它们之间存在垂直间隙.Chrome中的差距为2px,Firefox中的差距为2-3 px,在行之间交替显示.我认为在HTML5模式下使用每个网格系统都是如此.我不知道在纯HTML5中编写此代码的最佳方法是什么,所以我只是尝试了网格系统.垂直间隙也出现在960.gs,蓝图中.
我发现的一个解决方案可能是设置body {line-height:0}并在每个印刷标签中定义line-height.但我不明白为什么这样一个简单的案例需要这么糟糕的黑客:垂直排列的图像.为什么HTML5模式下的浏览器与XHTML Transitional模式不同？
在这里,我有相同的页面,没有任何改变,只有doctype.XHTML在每个浏览器中都是像素完美的,HTML5有一个差距,并且不同于浏览器.
使HTML5示例像XHTML过渡一样工作的最佳方法是什么？
更新:thirtydot回答了问题,如果我包含img {display:block; HTML5版本的行为与XHTML Transitional完全相同.谢谢thirtydot!
但是在关闭这个帖子之前,有人可以向我解释为什么会这样:
我有一个<textarea>需要适应其大小未预先确定的空间(是屏幕大小的百分比).如果FireFox通过设置常规CSS属性,我可以获得良好的结果:
#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }
然而在IE 6和7中,我得到了不同的,奇怪的结果.在IE6中,文本框似乎在左侧和右侧都有填充,从而推动容器的大小增长.在IE7中,文本框在左侧有填充,但不会使容器的大小增大 - 而是将其右边缘推到容器外部.
高度设置似乎对IE6或IE7没有影响; 的<textarea>是2行长在这两种情况下,忽略了高度:100%的指令.
是否有一致的方法来<textarea>跨浏览器调整大小？
有没有办法摆脱左边的填充<textarea>？
使用position:absolute删除填充,但width:100%仍然搞砸了.IE7似乎计算出100%的宽度太大,导致<textarea>溢出<div>包含它的内容.
如果我有机会,我会创建一个独立的例子......