在IE中，锚文本是overflowing/overlapping而不是换行，但不是其他文本

Question

我运行遇到了一个我还没有解决的恼人问题。在深入探讨之前，我会指出我是在 Drupal 7 中这样做的（所以无需评论过多的包装元素，我已经知道了）。

问题是在所有版本的 IE（11 及以下版本）中，问题文本（也是锚标记）似乎溢出了父容器的边缘。在这种情况下，由于右侧有前 5 个小部件框，因此文本与小部件框重叠。

这个问题似乎没有发生在任何其他浏览器中（至少其余大部分可以正确标准化）。我试过设置父位置相对。我试过摆弄 text-overflow 和 word-wrap 属性。我试过设置子容器的宽度和定位。

到目前为止我所做的一切似乎都无法阻止此文本在任何版本的 IE 中重叠。我希望它在 IE 中表现得像在 Chrome/Firefox/Safari/etc.

中一样

这里是 link 这个问题的再现（正如我已经验证的那样，它在 IE 中复制了这个问题）：

http://jsfiddle.net/pthurmond/zn23jvap/1/

问题出在像这样的长文本上：

<a class="fieldset-title" href="#">
  <span class="fieldset-legend-prefix element-invisible">Show</span>
  <span>
    <span class="question" url="/someone-used-my-social-security-number-open-credit-card-account-can-i-get-new-social-security-number">
      Someone used my social security number to open a credit card account. Can I get a new social security number?
    </span>
  </span>
</a>

有人知道如何解决这个问题吗？

Answer 1

问题是由 <legend> 元素引起的。 Internet Explorer 中存在一个错误，导致图例显示时没有自动换行。有关详细信息，请参阅此 article。

我建议只使用 header 标签。

Answer 2

<legend> 元素 比其在本文档中包含的元素宽 :

legend { max-width: 100%; }

这个小改动应该可以解决您的问题。

鉴于您在本文档中描绘了一系列问题和答案，我实际上鼓励您考虑一种不同的结构，一个使用 <dl>, <dt>, and <dd> 的结构：

<dl>
    <dt>I placed a fraud alert for myself. Does that cover my spouse as well?</dt>
    <dd>No. A separate fraud alert must be placed for your spouse. You each..</dd>
    <dt>Someone used my social security number to open a credit card account.</dt>
    <dd>It’s unlikely the Social Security Administration will issue a new n..</dd>
</dl>

这正是 definition list 旨在容纳的内容类型。

在IE中，锚文本是overflowing/overlapping而不是换行，但不是其他文本

In IE, anchor text is overflowing/overlapping instead of wrapping, but not other text

html

css

internet-explorer

drupal-7