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。所以也許它可以提供更深入的理解這個問題。如果有人也有解決方案 - 我真的很感激它:-)
非常感謝大家!
只有服務器端代碼可用,調試JavaScript(運行客戶端)相當困難。你可以發佈你生成的HTML(沒有.NET代碼),或者 - 更好 - 發佈一個鏈接到一個工作示例。 – RoToRa 2011-01-29 20:10:46
肯定: http://www.dlaglagim.com/Home/Forum/0 – 2011-01-30 07:25:08