To practice CSS, must first solve ie some of the details of the analysis _ Experience Exchange

The worse thing is, even if you are only for IE design, do not consider other browsers, because the IE model can be said to be an elusive monster, so you simply for IE design will encounter many problems, found that a lot of effect is always around the difficult to achieve.

As we all know, the goal of XHTML+CSS is to achieve separation of content and performance, theoretically for any particular content, we can achieve any of the forms we want through CSS, or in detail the layout of the form. Although the reality and this goal has a certain gap, but CSS has been able to meet most of the common layout needs, this has CSS Zen Garden as proof. However, if you are using IE, because it is elusive, so if you want to use a simple and elegant CSS to enable IE to achieve "any layout you want", it is impossible, only complex elaborate CSS can be used in IE to meet your needs. I have mentioned a theory that "a person's interest in a research direction is likely to be determined by accident, which is like a person playing badminton for the first time, if you win a few dishes you will be interested, if you have not won you will not be interested." IE, in the need for complex elaborate CSS, is enough to deter most beginners. You always feel that you have no interest, you are naturally not interested in learning.

Give an example to illustrate this problem, for example you do not know IE has haslayout this matter, whether an element is haslayout to its layout way has the important influence, so you certainly use the simplest thinking to think the CSS, thought that the different CSS rule should be loose coupling. "CSS should be designed to be simple and elegant," you would think, yes, it was actually designed to do this, but IE is not the way to implement CSS. We use the following code to prove the difference between IE in quirks mode and standards mode:
<div style= "background-color:red; height:30px ">
<div>Hello</div>

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

First, we use quirks mode to see how the results are, and a beginner sees the results to understand the CSS rules. In quirks mode, we can see that the background is red <div/> contains the above 1 lines of text, as well as the following left floating (naturally included in the text to the right of the floating block), where we can establish two kinds of knowledge:

1. A container is full of content, and when the total height of the content is larger than the container, the container naturally stretches to ensure that the content is accommodated.
2. Floating blocks are also required by stretching to ensure that the content is accommodated by the above conditions.

The rules above are completely wrong, and a designer who understands the standard CSS and understands quirks mode will explain his understanding:

1. Because IE in quirks mode will be the height of min-height, so it believes that <div/> height is not less than the 30px specified height. According to the CSS standard, when height is set to 30px, the height must be 30px, beyond the part of how to deal with the special CSS rules.
2. Because the <div/> is set to the height attribute, this lets it haslayout in IE, which causes it to contain all the content, including the floating block. According to the CSS Standard, a floating block is not required to be fully contained, it floats there, unless the element with the clear attribute is encountered, the successor will only move sideways.

Well, believe that the contrast is enough to explain the seriousness of the problem, through IE to understand the effect of CSS, the end will only make your understanding and real CSS difference is very far. Detailed standards mode and Quirks mode bring the standard implementation difference, you can refer to this article:CSS Quirks mode and strict mode.

Then I'm sure someone is going to ask me if it's okay to make sure that standards mode is used through DOCTYPE. Standards mode does make IE's interpretation of CSS a lot more reasonable, but things are not so simple, this you can through practice to slowly experience. You can try to design CSS in standards mode and try to keep them consistent across the 4 major browsers in Ie/ff/opera/safari, and as the design progresses, you'll find it's not that easy. Maybe you're not willing to take the time to fix some of these little problems, preferring to let some of the browser's users see the more ugly layout, but at least you've learned one thing similar to the previous example: different browsers, even in standards mode, still have a difference in their understanding of CSS, And the difference is that at most only one of them is right, and maybe even all of them are wrong. This CSS contents and browser compatibility lists a number of browsers for CSS support differences, a CSS always because some of these rules in some browsers are not supported or buggy, It makes it difficult for you to keep them in the same display on different browsers.

Then someone might ask me, since IE has the biggest market share (especially among entry-level users), or if my client specifies IE as a client, isn't it good to design css for IE only? Why design CSS for standard browsers such as FF and fix for IE? Because of IE's elusive temper, you can't understand its behavior as a simple and elegant rule, and then get you into the dilemma of a highly coupled CSS rule. Take a look at 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 hello in the two <div/> is shifted to the right to avoid This floating block, where the <div/> occupies only the height of the transition, Because it does not declare the height, so is the natural height, which is the same, these are well understood, all the rules are decoupled. Then add a copy of the width property of the first <div/> to the example to see how the results 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 the , and squeezed the second <div/> below. How do you explain that? We have not set its Height property Oh, do you have to commit the previous example because the haslayout must accommodate all the content? Positive solution, this is ie difficult to tame place, one should be completely independent of the width attribute, set up after the height of other effects, which makes it impossible to try in a simple and elegant way to understand IE behavior. This proves that if you want to learn how to design css for IE, it is much harder to learn the standard CSS, plus the understanding of IE's weird behavior, than just learn how to design a standard browser. At this point, do you want to say, "if the customer is willing to give up ie, even the whole world is willing to give up IE, it is too good", yes, this is the right idea, thinking that only for IE design for convenience will only make you crazy.

Finally, if you already have a certain CSS base, the CSS rules are understood without bias, but lack the imagination of the combination of CSS rules, can not do the so-called "achieve any you want the layout effect", which means that your internal strength has been trained, just a few superficial routines, this time I recommend you to see the " CSS Mastery/ proficient in CSS. After reading this book, I believe you will only feel that you lack the creative ability of layout, but do not have layout but do not know how to achieve. In addition, if you are interested in CSS content, you can 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 new year, I may write some articles related to Asp.net+css, because now ASP.NET+CSS development is not convenient, that is, the use of asp.net 2.0 CSS friendly control adapters also, Therefore, we need to customize the matching control adapter to solve the problem, which is the next thing I want to study.