IE appendChild высота родительского элемента div

Question

Итак, я пытаюсь добавить раздел в div, используя createElement и appendChild. И он прекрасно работает во всех браузерах, кроме IE (удивительно), потому что родительский элемент не корректируется с правильной высотой. Что забавно, он прекрасно работает в режиме совместимости IE8, но IE8 без режима совместимости просто добавляет его, не изменяя родительскую высоту, добавляя его так, как если бы его позиция была абсолютной, даже если это не так. Для родительского div не задана высота.

У меня так <div id="guestArea"></div>

и

<script type="text/javascript">
var numGuest = 0;
function addGuest(){
  var guestSection = document.getElementById("guestArea");
  numGuest++;
  var newGuestDiv = document.createElement("div");
  newGuestDiv.innerHTML = '<span style="font-weight: bold; font-size: 14px;"> Guest #' +  numGuest + ':</span><br />First name:<br /><input type="text" name="guestFirstName[]" /><br />Last name:<br /><input type="text" name="guestLastName[]" /><br /><br /><div style="padding-left: 5px; border-left: 2px #aeaeae dotted;">Friday:<br /><input type="checkbox" value="1" name="guestAlbanyRec[]" id="guest' + numGuest + 'AlbanyRec" /> <label for="guest' + numGuest + 'AlbanyRec">8:00 PM Albany Reception</label><br /><br />Saturday:<br /><input type="checkbox" value="1" name="guestLunch[]" id="guest' + numGuest + 'Lunch" /> <label for="guest' + numGuest + 'Lunch">12:00 PM Catered lunch & house tours ($10/person)</label><br /><input type="checkbox" value="1" name="guestCampus[]" id="guest' + numGuest + 'Campus" /> <label for="guest' + numGuest + 'Campus">1:00 PM Campus tours & guestni v. active sports</label><br /><input type="checkbox" value="1" name="guestDinner[]" id="guest' + numGuest + 'Dinner" /> <label for="guest' + numGuest + 'Dinner">5:00 PM Dinner dance ($85/person). If attending please check food choice below.</label><br /><input type="radio" value="beef" name="guestChoice[]" id="guest' + numGuest + 'Choice1" /> <label for="guest' + numGuest + 'Choice1">Beef</label> <input type="radio" value="chicken" name="guestChoice[]" id="guest' + numGuest + 'Choice2" /> <label for="guest' + numGuest + 'Choice2">Chicken</label> <input type="radio" value="fish" name="guestChoice[]" id="guest' + numGuest + 'Choice3" /> <label for="guest' + numGuest + 'Choice3">Fish</label> <input type="radio" value="vege" name="guestChoice[]" id="guest' + numGuest + 'Choice4" /> <label for="guest' + numGuest + 'Choice4">Vegetarian</label><br /><br />Sunday:<br /><input type="checkbox" value="1" name="guestBrunch[]" id="guest' + numGuest + 'Brunch" /> <label for="guest' + numGuest + 'Brunch">11:00 AM Brunch ($5/person)</label><br /></div><br />';
  //Must append child other wise inputs get reset
  guestSection.appendChild(newGuestDiv);
}
</script>

Заранее спасибо за любую помощь.

Answer 1

Это может помочь ...

  var newGuestDiv = '<span style="font-weight: bold; font-size: 14px;"> Guest #' +  numGuest + ':</span><br />First name:<br /><input type="text" name="guestFirstName[]" /><br />Last name:<br /><input type="text" name="guestLastName[]" /><br /><br /><div style="padding-left: 5px; border-left: 2px #aeaeae dotted;">Friday:<br /><input type="checkbox" value="1" name="guestAlbanyRec[]" id="guest' + numGuest + 'AlbanyRec" /> <label for="guest' + numGuest + 'AlbanyRec">8:00 PM Albany Reception</label><br /><br />Saturday:<br /><input type="checkbox" value="1" name="guestLunch[]" id="guest' + numGuest + 'Lunch" /> <label for="guest' + numGuest + 'Lunch">12:00 PM Catered lunch & house tours ($10/person)</label><br /><input type="checkbox" value="1" name="guestCampus[]" id="guest' + numGuest + 'Campus" /> <label for="guest' + numGuest + 'Campus">1:00 PM Campus tours & guestni v. active sports</label><br /><input type="checkbox" value="1" name="guestDinner[]" id="guest' + numGuest + 'Dinner" /> <label for="guest' + numGuest + 'Dinner">5:00 PM Dinner dance ($85/person). If attending please check food choice below.</label><br /><input type="radio" value="beef" name="guestChoice[]" id="guest' + numGuest + 'Choice1" /> <label for="guest' + numGuest + 'Choice1">Beef</label> <input type="radio" value="chicken" name="guestChoice[]" id="guest' + numGuest + 'Choice2" /> <label for="guest' + numGuest + 'Choice2">Chicken</label> <input type="radio" value="fish" name="guestChoice[]" id="guest' + numGuest + 'Choice3" /> <label for="guest' + numGuest + 'Choice3">Fish</label> <input type="radio" value="vege" name="guestChoice[]" id="guest' + numGuest + 'Choice4" /> <label for="guest' + numGuest + 'Choice4">Vegetarian</label><br /><br />Sunday:<br /><input type="checkbox" value="1" name="guestBrunch[]" id="guest' + numGuest + 'Brunch" /> <label for="guest' + numGuest + 'Brunch">11:00 AM Brunch ($5/person)</label><br /></div><br />';
  var range = document.createRange();
  var fragmentToInsert = range.createContextualFragment(newGuestDiv);
  document.getElementById('guestArea').appendChild(fragmentToInsert);