DIV中包含在FIELDSET中的绝对定位的信息框被切断

Question

我遇到了一些信息框的问题，信息框绝对位于表单中。页面的基本结构是我使用的是一个定义列表，其中包含DT标签中包含的每个字段的标签，以及一个包含DD标签中该字段的任何其他相关信息的输入框。

根据我的理解问题出在哪里，我有一个信息框（输入右侧的蓝色框，这是为左侧的输入提供额外信息），其中包含DD标签的一部分绝对定位。由于DD标签的高度限制为输入框拉伸，信息框将被切断。不知何故，我需要扩展DD标签的高度，它有一个信息框来容纳它。

您可以在此处查看此示例：http://www.andbarsolutions.com/test-html/form.htm

我有两个例子，一个是当信息框在最后一个输入时，所以这意味着它将悬在表格的末尾但是没关系。虽然第二个示例是第一个输入上的信息框，它可能会延伸到两个输入，具体取决于它将包含的内容量。正如您所看到的，它会切断两种情况（特别是如果您在FF中看到它）。我需要将HR标签保留在最后，因为它用于布局目的。

理想情况下，我想看看是否有一个与CSS相关的答案，而不是诉诸脚本，因为我限制了我可以在此页面上使用的脚本数量，如前所述，我们可以处理1,2 ，该信息框中有3或4行内容，因此需要将其视为具有动态高度的框。

很想听到有关此事的任何反馈！

Answer 1

问题是：您在DL上使用overflow:hidden来清除浮点数，因此隐藏了绝对定位的块。

有几种方法可以解决它：

• 通过任何其他方式清除浮动，例如，使用clearfix：

  dl:after {
      content:"";
      display:table;
      clear:both;
  }
  

  在条件评论中为IE添加hasLayout：

  dl {
      zoom: 1;
  }