Recently, when I was developing a small site using .net, I found that the CSS styles defined in a specific area of the page disappeared inexplicably after adding the .net code. I tried many methods, but found that it was the comments in the CSS that were to blame.
The original CSS code is as follows view plaincopy to clipboardprint?
/*right area*/
.RightPart{width:230px;margin-top:10px;}
.RightPart{text-align:left;}
.RightPart .Title{background:url(../images/RightPartTitle.gif) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleR{background:url(../images/RightPartTitleRed.gif) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleG{background:url(../images/RightPartTitleG.gif) no-repeat left top;padding-left:32px;height:47px;}
.RightPart h3{font-size:14px;color:#FFF;}
.RightPart .LeftBorder{width:8px;background:url(../images/make_default_2_1.jpg) repeat-y left top;}
.RightPart .RightBorder{width:9px;background:url(../images/make_default_2_2.jpg) repeat-y right top;}
.RightPart .Content{width:205px;padding:0 5px;}
.RightPart ul{list-style:none;}
.RightPart li{display:block;background:url(../images/page_story_icon_ball.jpg) no-repeat left 3px;padding:3px 0 3px 15px;}
/*Map classification*/
.RightPart .Category li{font-size:16px;font-weight:bold;background:url(../images/page_story_icon_ball.jpg) no-repeat left 5px;margin:4px 0 4px 10px;}
.RightPart .Category .Line{background:left top;padding:0;margin:0 0 0 3px !Important;margin:-13px 0 0 3px;width:auto;height:4px;}
/*right area*/
.RightPart{width:230px;margin-top:10px;}
.RightPart{text-align:left;}
.RightPart .Title{background:url(../images/RightPartTitle.gif) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleR{background:url(../images/RightPartTitleRed.gif) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleG{background:url(../images/RightPartTitleG.gif) no-repeat left top;padding-left:32px;height:47px;}
.RightPart h3{font-size:14px;color:#FFF;}
.RightPart .LeftBorder{width:8px;background:url(../images/make_default_2_1.jpg) repeat-y left top;}
.RightPart .RightBorder{width:9px;background:url(../images/make_default_2_2.jpg) repeat-y right top;}
.RightPart .Content{width:205px;padding:0 5px;}
.RightPart ul{list-style:none;}
.RightPart li{display:block;background:url(../images/page_story_icon_ball.jpg) no-repeat left 3px;padding:3px 0 3px 15px;}
/*Map classification*/
.RightPart .Category li{font-size:16px;font-weight:bold;background:url(../images/page_story_icon_ball.jpg) no-repeat left 5px;margin:4px 0 4px 10px;}
.RightPart .Category .Line{background:left top;padding:0;margin:0 0 0 3px !Important;margin:-13px 0 0 3px;width:auto;height:4px;} What is missing is "/*map classification */"CSS effects for the following two lines.
I removed the comment "/*Map Classification*/", and when I pressed F5, I found that the page was normal. It seems that the problem I encountered before was the same.
Solution summary: If you find that the defined CSS style effect is lost when adding code in .net, try deleting some CSS comments near the missing style if there are no other problems, and the problem can be solved.