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

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;
  }