IE appendChild父div高度

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