2011-01-28 41 views
0

我正在創建一個ASP.NET MVC網站。我有一個CSS問題。 在網站我有a very simple forum。你可以通過點擊他們的標題expand messages,然後你可以在郵件中輸入reply to a message。這些屏幕截圖來自Chrome。但是,當我在IE或FF中加載時,回覆下的最後一位形式爲disappears(你可以看到它半秒,然後它消失)。簡單的論壇問題 - CSS和jQuery可能是IE和FF不兼容的罪魁禍首

編輯:這是一個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; 
} 

I希望在此問題上提供所有幫助。

而且 - 在IE論壇「標題」(郵件的標題,作曲家姓名和日期)及新訊息形式look really bad。所以也許它可以提供更深入的理解這個問題。如果有人也有解決方案 - 我真的很感激它:-)

非常感謝大家!

+0

只有服務器端代碼可用,調試JavaScript(運行客戶端)相當困難。你可以發佈你生成的HTML(沒有.NET代碼),或者 - 更好 - 發佈一個鏈接到一個工作示例。 – RoToRa 2011-01-29 20:10:46

+0

肯定: http://www.dlaglagim.com/Home/Forum/0 – 2011-01-30 07:25:08

回答

1

啊,好的。我相信你在這裏看到的是collapsing margins

最簡單的解決方案可能會放一個填充形式,而不是對字段集的利潤率上。

相關問題