To practice CSS, you must first analyze the details of IE.

Even worse, even if you only design for IE and do not consider other browsers, the IE model is definitely a monster that is hard to comprehend, therefore, you may encounter many difficulties when designing for IE, and find that many effects are always difficult to achieve.

We all know that the goal of XHTML + CSS is to achieve separation of content and performance. Theoretically, for any specific content, we can use CSS to achieve any form of representation we want, or the layout is detailed. Although there is a gap between reality and this goal, CSS can already meet most common layout requirements, as evidenced by CSS Zen garden. However, if you use IE because it is elusive, if you want to use a simple and elegant CSS to enable IE to implement "Any layout form you want ", that's impossible. Only Complicated and complicated CSS can meet your needs on IE. I once mentioned a theory: "whether a person is interested in a research direction is probably determined by an accident. It is like a person playing badminton for the first time, if you win a few disks, you will be interested. If you never win, you will not be interested ". In the case of complex CSS, ie is enough to block the majority of attackers. You always feel that you have no essentials. Naturally, you are not interested in learning.

For example, if you do not know that IE has haslayout, whether or not haslayout has a significant impact on its layout method, so you must think about CSS in the simplest way, and think that different CSS rules should be loosely coupled. "CSS should be designed to be simple and elegant", you will definitely think like this. Yes, it is designed to be like this, but IE is not doing this to Implement CSS. We use the followingCodeTo prove the difference between the quirks mode and standards mode of IE:
<Div style = "background-color: red; Height: 30px">
<Div> Hello </div>

<Div> Hello </div>
</Div>

First, let's use the quirks mode to see how the results are, and a beginner will see how the results will understand CSS rules. In quirks mode, we can see that the <DIV/> with a red background contains the text in the previous line, and the (including the text on the right of the floating block) facing the left floating. Here, we can establish two understandings:

1. The container contains the complete content. When the total height of the content is greater than that of the container, the container will naturally stretch to ensure that the content is contained.
2. Float blocks also fall into the requirements of the above conditions by stretching to ensure content is accommodated.

The above rules are completely incorrect. A designer who understands standard CSS and quirks mode will explain his understanding as follows:

1. Because ie understands height as Min-height in quirks mode, it considers that the height of <DIV/> is no less than 30px specified by height. According to the CSS standard, when the height is set to 30px, the height must be 30px. How to Deal with the excess part is determined by the special CSS rules.
2. Because <DIV/> is set with the height attribute, this makes it haslayout in IE, which causes it to include all the content, including floating blocks. According to the CSS standard, floating blocks do not need to be completely included. They are floating there. Unless the elements with the clear attribute are set, the subsequent content will only shift away.

Well, I believe this comparison is sufficient to explain the seriousness of the problem. Understanding CSS through the effect of IE will only make your understanding far from the real CSS. For details about the Standard execution differences between standards mode and quirks mode, refer to this article.Article: CSS quirks mode and strict mode.

Then someone must ask me, if doctype is used to ensure the standards mode, will it be okay? Standards mode does make IE's explanation of CSS much more reasonable, but the process is not that simple. You can learn it through practice. You can try designing CSS in standards mode and try to keep them consistent in the four mainstream browsers IE/FF/Opera/safari. As the design goes on, you will find that this is not so easy to do. Maybe you are not happy to take the time to fix some of the minor issues. You 'd rather let some browser users see the ugly layout, but at least you have learned a truth similar to the above example: different browsers still have different understandings of CSS even though they are in the standards mode, one of the differences may be correct at most, or even all of them are incorrect. This CSS contents and browser compatibility lists the differences in CSS support from many browsers. A piece of CSS will always be because some of the rules are not supported on Some browsers or are buggy, as a result, it is difficult to keep them consistent in different browsers.

Next, someone may ask me, since IE has the largest market share (especially among entry-level users), or my customers designate ie as the client, isn't CSS designed only for IE? Why design CSS for standard browsers such as ff and fix it for IE? Due to the unpredictable temper of IE, you cannot understand its behavior as a simple and elegant rule, and then fall into the dilemma of highly coupled CSS rules. See the following example:
<Div style = "background-color: red; Border: 2px black solid">

<Div> Hello </div>
</Div>
<Div> Hello </div>

Now, the effect you see in IE should be on the left, and then the two <DIV/> Hello are shifted to the right to avoid the floating block , the above <DIV/> only occupies the height of the migration, because it does not declare the height, so it is the natural height, that is, the same, these are well understood, all rules are decoupled. Then, copy the width attribute of the first <DIV/> to the example to see what the result will be:
<Div style = "background-color: red; Border: 2px black solid; width: 600px">

<Div> Hello </div>
</Div>
<Div> Hello </div>

At this time, the first <DIV/> fully accommodated and squeezed the second <DIV/> to the bottom. How can this be explained? We have not set its height attribute. Is it because haslayout has to accommodate all the content as mentioned in the previous example? Positive Solution: This is where Ie is hard to tame. One should be a completely independent width attribute, which causes other effects than height after being set, this makes it impossible to try to understand ie behavior in a simple and elegant way. This proves that if you want to learn how to design CSS for IE, you must first learn the standard CSS and then understand the weird behavior of IE, it is much harder than learning how to design a standard browser. At this time, do you want to say, "if the customer is willing to give up IE, or even the whole world is willing to give up IE, it would be wonderful." Yes, this is the correct idea, with the intent of designing only for IE, it will only let you go.

Finally, if you already have a certain level of CSS foundation, you can understand CSS rules without any deviations, but lack the imagination to combine CSS rules, it is impossible to achieve the so-called "achieve any layout effect you want". That is to say, your internal skills have been developed, and there are only some superficial routines, at this time, I recommend you go to "CSS mastery/proficient in CSS". After reading this book, I believe that you will only feel that you lack the creative ability of layout, but you do not know how to implement it. In addition, if you are interested in CSS content, consider subscribing to my blog:

• CAT in Chinese (feed: http://feeds.feedburner.com/CatChen/Chinese)
• CAT in DOTNET (feed: http://feeds.feedburner.com/CatChen/dotNET)

After the Chinese New Year, I may write some files with ASP. net + CSS, because ASP. net + CSS development is not convenient, that is, the use of ASP. NET 2.0 CSS friendly control adapters is the same, so you need to customize the paired control adapter according to your actual situation to solve the problem. This is what I will study next.