title: How to keep the legend stable in a fieldset in IE 11?
body: <p>The legend is not staying in place when I hide and then show elements in the field set.  This works fine on Chome/FF, but not on IE 11.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;fieldset&gt;
  &lt;legend&gt;Test&lt;/legend&gt;
  &lt;div class='hider'&gt;Hide this&lt;/div&gt;
  &lt;div&gt;Lots and lots and lots and lots and lots and lots 
       and lots and lots and lots and lots and lots and 
       lots and lots and lots and lots and lots and lots 
       and lots of content.&lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function myShow(me)
  {
      $(me).unbind();
      $(me).parent().children(':not(.hider)').show();
      $(me).click(function () {
          myHide(me);
      });
  }
  
  function myHide(me)
  {
      $(me).unbind();
      $(me).parent().children(':not(.hider)').hide();
      $(me).click(function () {
          myShow(me);
      });
  }
  
  $(function () {
      $('.hider').click(function () {
          myHide(this);
      });
  });
  </code></pre>
  
  <p>JSFiddle that shows it happening on IE 11.
  <a href="http://jsfiddle.net/etb21zrr/" rel="nofollow">http://jsfiddle.net/etb21zrr/</a></p>
  
  <p>It works fine if you don't hide the legend, as seen here:</p>
  
  <p><a href="http://jsfiddle.net/xy9ofu77/" rel="nofollow">http://jsfiddle.net/xy9ofu77/</a></p>
  
  <p>While that can likely work for my immediate need, I would still like to leave this question open to see if there is a way correctly hide and show the legend in IE 11 in case anyone else needs to know (or if the customer ends up not liking changing the header to 'deleted').</p>