在IE中，定位文字溢出/重叠而不是换行，但其他文字没有

Question

I am running into an annoying problem I have yet to solve. Before I get too far into this I will point out that I am doing this in Drupal 7 (so no need to comment about the excessive wrapper elements, I already know).

The problem is that in all versions of IE (11 and on down) the question text (which are also anchor tags) seems to spill over past the edge of the parent container. In this case, since it has a top 5 widget box to the right, the text overlaps the widget box.

The problem does not seem to happen in any other browsers (at least the rest can mostly get standardization right). I have tried setting the parent position relative. I have tried fiddling with the text-overflow and the word-wrap properties. I have tried setting sub-container widths and positioning.

Nothing I have done so far seems to prevent this text overlapping in any version of IE. I want it to behave in IE as it does in Chrome/Firefox/Safari/etc.

Here is a link to the recreation of this problem (which replicates the issue in IE as I have verified):

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

The problem is with the ones with long text such as this:

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

Does anyone have any ideas as how to fix this?

Answer 1

The issue is caused by the <legend> element. There is a bug in Internet Explorer which causes the legend to be displayed without word wrap. See this article for more information.

I would recommend just using a header tag instead.

Answer 2

The <legend> element is wider than its containing element in this document:

legend { max-width: 100%; }

This minor change should resolve the issue for you.

Given that you are portraying a list of questions and answers in this document, I would actually encourage you to consider a different structure, one using <dl> , <dt> , and <dd> instead:

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

This is precisely the type of content the definition list is designed to accomodate.