显示在Chrome中动态添加<hr />的问题

Question

我正在开发一个Asp.Net MVC3应用程序，其中布局基于960 Grid Layout。
在创建编辑表单时让我的生活更轻松。这是一个基于div的布局系统。

我在javascript客户端自动执行一些修复操作，这样我就不必在每次编辑中对它们进行硬编码。形成。首先，必须在每行之后添加<div class="clear"></div>以重置格式。

我的第二个问题是，我必须增加每行之间约1/2线高度的垂直间距。但由于每一行都是一个div，我发现你不能只增加div之间的垂直边距。目前的CSS规范不会让你。所以，我在每行的div开始之前动态添加<hr/>标记。其他可能的插入DOM元素给我相同的效果。对于IE9＆amp; FF5这是正常的。但是，从Chrome 12开始，我收到了

当我查看DOM中的HTML时，会在每行的<hr />标记之前插入<div class="editor-row">标记。

我在jsFiddle Example有一个演示版。关于演示版本的注意事项 - 每行（标签和编辑字段）的控件在Chrome中显示为单行，在FF和IE中显示为两行。这是我用jsfiddle粘贴的有限CSS的问题。它对我试图解决的问题没有影响。

Answer 1

我只是在编辑器行类的显示属性中使用块而不是 table-row ，如此jsFiddle

中所示

Answer 2

将float:left添加到editor-row div中的每一个。