javascript - 在 Chrome 中动态添加 <hr> 显示问题

Question

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

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

我的第二个问题是，我必须将每行之间的垂直间距增加大约 1/2 行高。但是由于每一行都是一个 div，我发现你不能只增加 div 之间的垂直边距。当前的 CSS 规范不允许您这样做。所以，我正在动态添加 <hr/>每行的 div 开始之前的标记。其他可能的插入 DOM 元素给我同样的效果。对于 IE9 和 FF5，这工作正常。但是，从 Chrome 12 开始，我得到了

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

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

Answer 1

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