To practice CSS, must first solve some of the details of IE analysis _ experience Exchange

The worse thing is, even if you just for IE design, regardless of 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 effects are always around to be difficult to achieve.

As we all know, the goal of XHTML+CSS is to achieve the separation of content and performance, theoretically for any particular part of the content, we can achieve any form of expression we want through CSS, or in a detailed form of layout. Although there is a gap between the reality and this goal, CSS has been able to meet the most common layout needs, this is the CSS Zen garden for 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 on IE to meet your needs. I have mentioned a theory, "whether a person is interested in a research direction is likely to be determined entirely by accident, which is like a person playing badminton for the first time, if you win a few times you will be interested, if you have not won you will not be interested." IE, which requires complex elaborate of CSS, is enough to deter most beginners. You always feel that you have no interest, and 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 a significant influence, so you certainly use the simplest thinking to think about CSS, think that different CSS rules should be loosely coupled. "CSS should be designed to be simple and elegant", you will certainly think so, yes, it is really designed to do so, 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:

Hello

Hello

First, we use quirks mode to see how the results are, and a beginner sees how the results will go about understanding CSS rules. In quirks mode, we can see that the background is red with the text containing the above 1 lines, and the following left floating (naturally also included in the text to the right of the floating block), here we can build two kinds of knowledge:

1. A container is a complete containing 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. The floating block also belongs to the above conditions as required by stretching to ensure the content is accommodated.

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

1. Because IE in the quirks mode will be the height of the figure as min-height, so it is considered to be not less than the altitude specified 30px can be. According to the CSS standard, when height is set to 30px, the height must be 30px, beyond how the partial processing is determined by the specific CSS rules.
2. Because the Height property is set, it haslayout in IE, which causes it to contain all the content, including floating blocks. According to the CSS standard, the floating block is not necessarily fully contained, it floats there, unless the element with the clear property is encountered, the successor will only side-shift avoidance.

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

Then someone must ask me if it's okay to use standards mode with DOCTYPE. Standards mode does allow IE to explain the CSS a lot more reasonably, but things are not so simple, you can practice to slowly experience. You can try to design CSS in standards mode and try to keep them consistent across the 4 major browsers of 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 minor problems, preferring to let some of the browsers ' users see the ugly layout, but at least you've got a similar idea to the example above: different browsers, even in standards mode, still differ in their understanding of CSS, There may be at most one of the differences that are correct, or perhaps all of them are wrong. This CSS contents and browser compatibility the various browsers to the CSS support differences, a CSS always because some of the rules in some browsers are not supported or buggy, And it makes it difficult to keep them consistent across browsers.

Then someone may ask me, since IE's market share is the largest (especially in the entry-level users), or that my client designated to use IE as a client, only for IE design CSS is not good? Why design CSS for standard browsers such as FF and fix it for IE? Because IE's elusive temper makes it impossible for you to interpret its behavior as a simple and elegant rule, and then let you fall into the dilemma of CSS rules that are highly coupled. Take a look at the following example:


Hello

Hello

Now, the effect you see in IE should appear on the left side, and then both of the Hello are offset to the right to avoid the floating block, which only occupy the height of the migration, because it does not declare the height, so is the natural height, that is, the same, these are very good understanding, all the rules are decoupled. Then add a copy of the width property of the first to the example to see how the result will look:


Hello

Hello

The first one was fully accommodated, and the second was squeezed below. How do you explain that? We don't have to set its Height property. Oh, does it make sense to have all the content in the previous example because of the haslayout? Positive solution, this is the place IE is difficult to tame, one should be completely independent of the width property, set up after the height of the other effects, which makes it impossible to try in a simple and elegant way to understand the behavior of IE. This proves that if you want to learn how to design css for IE, it is much more difficult to learn the standard CSS, plus the understanding of IE's bizarre behavior, than just learning how to design a standard browser. At this time you are not to say, "if the customer is willing to give up IE, even the world is willing to give up ie, it is really too good", yes, this is the right idea, thinking only for IE design for convenience will only let you go mad.

Finally, if you already have a certain CSS foundation, the CSS rules are understood without bias, but lack of the imagination of the combination of CSS rules, can not do so called "achieve any of the layout you want to effect", which means that your internal strength has been practiced, just a few superficial routines, this time I recommend you to see the CSS mastery/is a master of CSS. After reading this book, I believe you will only feel that you lack the creative ability of layout, but do not have the layout but do not know how to achieve. Also, if you are interested in CSS, 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 articles related to Asp.net+css, because now ASP.NET+CSS development is not convenient, that is, using the ASP. NET 2.0 CSS friendly Control adapters, Therefore, it is necessary to customize the matching control adapter according to your actual situation to solve the problem, which is what I will study next.

