It's all about CSS.

Today, I encountered a very funny problem. When converting the static page designed by the artist to An ASPX page, the design page is displayed normally, but the format is incorrect during preview. Although this is a very simple problem, if you have never encountered it, it may be difficult to determine the problem at once.

Design view:

Preview:

According to the static page designed by the artist, no problem is displayed. However, if you use An ASPX page instead of a static page without any modification, CSS references and image links are completely correct. You can view everything on the design page, but when you preview the page, style loading fails. Some styles are applied, but some do not. That is to say, some CSS styles do not play a role. What's the problem? Strange. I have done the same page conversion before, but this is not the case, it is very puzzled. Continue to check the links between CSS and images. No problems are found, and you can only seek for the network without any help, but Google has not encountered similar problems. It seems that few people have encountered such problems. I can only explore it myself. If I write CSS directly to the page, there is no problem.

Summary:
<1> This problem occurs only when you preview the design page.
<2> this is not the case with similar operations.
<3> This is rare for others

Analysis:

Compare the differences between this project and the previous project in terms of settings and technology; will the application be running, some unknown elements are loaded. In order to reduce the connections and coupling between projects, I re-created a web project for separate testing. This still happens. At first, I thought it was a conflict between CSS. So I took out a module and made it into a page to reference the corresponding CSS, but it was still wrong. Is it a problem with vs2005? I tested it with 2008 again and created a new web. After some checks, the cause of the problem is reduced:
<1> it is not a problem with. NET development tools. But it may be caused by other plug-ins. Some strange problems occurred when installing powerdesigner.
<2> the problem of CSS itself is unknown.
I re-checked the computer program and did not find any software similar to the powerdesigner design. We used to take out the style sheet of a module for testing and did not find such problems.

Eliminate other possibilities and return to CSS.

Now, we can be sure that the problem still lies in the problem of the CSS file itself. If you are an experienced expert, you may be able to directly determine the problem of CSS without the complex tests mentioned above. However, I also checked and tested CSS and did not find the root cause of the problem. This requires further exploration.

I took out a page from the project, took out a part of the page, and then took out the CSS control for a certain control. After some tests, I finally got an amazing discovery, when CSS does not contain comments, the page is displayed normally, and the original problem lies in the comments. Then I will Google the exceptions caused by CSS comments, and I found some eyebrows.

The comment cannot be Chinese.If you write Chinese comments for your defined CSS, some code may become invalid in some special cases (such as server-side support and the program type used on the page.

　　There should be spaces between the annotator and Chinese charactersIf it is the write method below, it will be abnormal.

/* Header */
. Header
{
Width: 100%;
Heigth: 172px;
Border-width: 1px;
}

 

According to him, I tried it. It worked really well. However, you can view the previous project. CSS also has Chinese comments, and there is no space between Chinese comments and comments. why can it be displayed normally.

Think about it. There should be no Chinese Character comments or spaces, and the problem should not be so simple. This is not the real source of the problem. It is very likely that the encoding problem, so I use NotePad to open the original CSS file, save as UTF-8 format, and then overwrite the CSS file in the project, the results are really normal display. The real root cause of the problem is found.

Conclusion:

CSS files are ANSI encoded by default. You may find that this is normal. However, when CSS files contain Chinese comments, it may be unsatisfactory!

Ensure that HTML, JS, and CSS are encoded in the application. It is best to use UTF-8, sometimes Chinese page may need to be set to gb2312.

When exceptions occur in JS, CSS, and other introduction, you may wish to check the file encoding.

 

This article is just a small problem. If you are an experienced expert, you may be able to see the crux of the problem. But sometimes it is easy to get confused. Here I will write it out, maybe it is very helpful to everyone, but it shows some small issues that should be paid attention to during programming, it's also an alarm for friends. Never learn me so silly.