Question

我遇到了一个我尚未解决的烦人问题。在我深入研究之前，我会指出我在Drupal 7中这样做（所以不需要评论过多的包装元素，我已经知道了。）

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

这个问题似乎没有发生在任何其他浏览器中（至少其余的可以大多数标准化正确）。我试过设置父位置相对。我试图摆弄文本溢出和自动换行属性。我尝试过设置子容器宽度和定位。

到目前为止，我所做的一切似乎都没有阻止任何版本的IE中的文本重叠。我希望它能像在Chrome / Firefox / Safari /等中一样在IE中运行。

以下是重新解决此问题的链接（在我已经验证的情况下复制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。

我建议只使用标题标记。

Answer 2

<legend>元素更宽而不是本文档中的包含元素：

legend { max-width: 100%; }

这个小改动应该为您解决问题。

鉴于您在本文档中描绘了一系列问题和答案，我实际上鼓励您考虑使用<dl>，<dt>和<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中，锚文本是溢出/重叠而不是包装，而不是其他文本

2 个答案: