IE appendChild parent div height

Question

所以我试图使用createElement和appendChild为div添加一个部分。它在所有浏览器中都工作得很好，除了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);