简单的论坛问题 - CSS和jQuery可能是IE和FF不兼容的罪魁祸首

Question

我正在创建一个ASP.NET MVC网站。我有一个CSS问题。 在我的网站a very simple forum。您可以expand messages点击其标题，然后您可以在邮件中reply to a message。这些屏幕截图来自Chrome。但是，当我在IE或FF中加载它时，回复表格disappears下的最后一位（你可以看到它半秒然后它就会消失）。

编辑：这是一个工作示例的link。

以下是源代码：

HTML（带有ASP.NET）功能：

<div class="postNewMessageContainer">
        <% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" }))
           { %>
            <fieldset class="commentFieldset">
                <legend class="addCommentBtn">הוסף הודעה</legend>

                <div class="addCommentBox">
                        <%= Html.LabelFor(model => model.newMessage.messageSubject)  %>          
                        <%= Html.TextBoxFor(model => model.newMessage.messageSubject, new { @class = "required"})%>  

                        <%= Html.LabelFor(model => model.newMessage.messageComposer)  %>    
                        <%= Html.TextBoxFor(model => model.newMessage.messageComposer, new { @class = "required"})%>      

                        <%= Html.LabelFor(model => model.newMessage.messageContents)  %> 
                        <%= Html.TextAreaFor(model => model.newMessage.messageContents, new { @class = "required"})%>

                        <input type="hidden" name="newMessage.parentMessageID" value="0" />

                    <div>
                        <input type="submit" value="שלח"/>
                    </div>
                </div>
            </fieldset>


        <%} %>
    </div> <%-- postNewMessageContainer --%>

    <%-- display all forum messages --%>
    <div class="forumContainer">
    <% foreach (var completeParentMessage in Model.CompleteForumMessages.Where(a=>a.parentMsg.isActive == true))
       {%>
        <div class="forumMessageContainer userType<%=Html.Encode(completeParentMessage.parentMsg.MessageAuthorType)%>" 
        id="forumMessage<%=Html.Encode(completeParentMessage.parentMsg.MessageID)%>">
            <div class="msgHeader">    
                    <span class="forumMsgSubject"><%=completeParentMessage.parentMsg.MessageSubject%></span>
                    <span class="forumMsgComposer"><%=completeParentMessage.parentMsg.MessageComposerName%></span>
                    <span class="forumMsgDate"><%=completeParentMessage.parentMsg.MessageDate.Value.ToString()%></span>
            </div>
            <div class="msgContents">
                    <span class="forumMsgText"><%=completeParentMessage.parentMsg.MessageContents%></span>


                    <% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" }))
                       { %>
                        <fieldset class="commentFieldset">
                            <legend class="addCommentBtn">הוסף תגובה</legend>

                            <div class="addCommentBox">

                                    <%= Html.LabelFor(model => model.newMessage.messageSubject)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageSubject, new { @class = "required" })%>  

                                    <%= Html.LabelFor(model => model.newMessage.messageComposer)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageComposer, new { @class = "required" })%>      

                                    <%= Html.LabelFor(model => model.newMessage.messageContents)  %> 
                                    <%= Html.TextAreaFor(model => model.newMessage.messageContents, new { @class = "required" })%>

                                    <input name="newMessage.parentMessageID" type="hidden" 
                                    value="<%=completeParentMessage.parentMsg.MessageID %>" />

                                <div>
                                    <input type="submit" value="שלח"/>
                                </div>
                            </div>
                        </fieldset>


                    <%} %>

            </div>
       </div> 

       <%-- display all responses to current message in loop --%>                     
       <% foreach (var childMessage in completeParentMessage.childMsgs)
          { %>
            <div class="forumSubmessageContainer userType<%=Html.Encode(childMessage.MessageAuthorType)%>" 
            id="forumMessage<%=Html.Encode(childMessage.MessageID)%>">
                <div class="msgHeader">    
                        <span class="forumMsgSubject"><%=childMessage.MessageSubject%></span>
                        <span class="forumMsgComposer"><%=childMessage.MessageComposerName%></span>
                        <span class="forumMsgDate"><%=childMessage.MessageDate.ToString()%></span>
                </div>
                <div class="msgContents">
                        <span class="forumMsgText"><%=childMessage.MessageContents%></span>

                       <% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" }))
                       { %>
                        <fieldset class="commentFieldset">
                            <legend class="addCommentBtn">הוסף תגובה</legend>

                            <div class="addCommentBox">

                                    <%= Html.LabelFor(model => model.newMessage.messageSubject)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageSubject, new { @class = "required" })%>  

                                    <%= Html.LabelFor(model => model.newMessage.messageComposer)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageComposer, new { @class = "required" })%>      

                                    <%= Html.LabelFor(model => model.newMessage.messageContents)  %> 
                                    <%= Html.TextAreaFor(model => model.newMessage.messageContents, new { @class = "required" })%>

                                    <input name="newMessage.parentMessageID" type="hidden" 
                                    value="<%=completeParentMessage.parentMsg.MessageID %>" />

                                <div>
                                    <input type="submit" value="שלח"/>
                                </div>
                            </div>
                        </fieldset>


                    <%} %>

                </div> <%-- /msgContents --%>
            </div> <%-- /forumSubmessageContainer --%>

          <%} %>

       <%} %>

    </div> <%-- /forumContainer --%>

这是Javascript：

<script type="text/javascript">

    $(function() {

        $(".msgContents").hide();
        $(".msgHeader").click(function() {
            var div = $(this).next("div");
            if (div.is(":hidden")) {
                div.slideDown();
            } else {
                div.slideUp();
            }
        });

        $(".addCommentBox").hide();
        $(".addCommentBtn").click(function() {
            var div = $(this).next("div");
            if (div.is(":hidden")) {
                div.slideDown();
            } else {
                div.slideUp();
            }
        });
    });
</script>

相关的CSS：

    /* ========== Forum ========== */

.forumMessageContainer , .forumSubmessageContainer
{
 margin-top: 3px;
 margin-bottom: 3px;
 padding-right: 4px;
 font-size: 15px;
 height: 100%;
}

.forumMessageContainer 
{
 background-color:#CCBBDD;
}

.forumSubmessageContainer
{
 background-color:#CCBBDD; /*#CCCCDD;*/
}

.userType1
{
 background-color: #9966CC;
 color: White;
}

.commentFieldset
{
 background-color: #FFFFFF;
 margin: 2em;
}

.addCommentBox
{

}

.msgHeader .forumMsgSubject
{
 float:right;
}

.msgHeader:hover, .addCommentBtn:hover
{
 cursor: pointer;
}

.msgHeader .forumMsgDate
{
 float:left;
 padding-left: 5px;
}

.msgHeader .forumMsgComposer
{
 padding-right: 5%;
 font-weight:bold; 
}


.forumSubmessageContainer
{
margin-right:3%;
}

.ForumBackNext
{
 padding-top: 10px;
 text-align:center;
}

#newMessage_messageContents
{
 height:150px;
 width:350px;


}

#newMessage_messageSubject, #newMessage_messageComposerName
{
 width:350px;
}



.deleteForumMsg
{
 padding-top: 5px;
 padding-left: 5px;
 float: left;
}

我会很感激所有和有关此事的任何帮助。

另外 - 在IE中论坛“标题”（消息标题，作曲家姓名和日期）和新消息形式look really bad。所以也许它可以为理解问题提供进一步的洞察力。如果有人也有解决方案 - 我真的很感激它:-)

非常感谢你们！

Answer 1

啊，好的。我相信你在这里看到的是collapsing margins。

最简单的解决方案可能是在表单上填充填充而不是字段集上的边距。