Css compatibility in browsers. My solution is not required! Important

Recently, many of my friends have asked me about the compatibility of my browser. I don't know where to start. Write it by yourself, but not necessarily. Baidu finds a compatibility book, which is basically compatible with two styles. See the most! Important. The Code of many friends is as long as thousands of lines.
I'm wondering, I almost don't need to write css code! Important, and I write CSS to pursue a word "simple". Generally, there are no more than 500 lines in css writing on a website. However, my code is also compatible with IE6, 7, Firefox, and Opera.

Most of my CSS writing styles come from foreign writing methods, and most of them are rarely seen abroad! Mportant is written in a reasonable way and the code is quite concise. The Reusable style does not define a class to express it. In addition, the large numbers of websites outside China are used in em.
In other words, there is no final conclusion on which style of writing is good. I am only talking about my personal experience in css writing this article today. Well, it is easy to talk about the above method:

1. in ie6, the height of the div is supported by the div nested in the div, but not by ie7 and Firefox. Therefore, when writing a div with more nested content, I do not recommend using the height attribute. We recommend that you add overflow: hidden; to automatically open the height of the div.

2. Although the pixel understandings of the margin and padding browsers are different, the height understandings are the same. In the case of small nesting, such as the webpage layout header, I usually use height to define the height of the layout div, and then add a background to the layout. If there is a background image, the height attribute is generally not used with margin and padding, because the pixel understanding of margin and padding varies with different browsers. For example, we define a {height: 50px; padding: 10px;} For the layout header, and then place a background image with a height of 70px; when some browsers refresh, they will find that the display is incomplete, or the lower part will be white. Set the style to {height: 70px;} and add the background, so that the display of Each browser is the same.

3. Some friends define font, line height, font size, and so on a webpage. In fact, in many cases, the font definition is useless. For example, the following code is repeatedly defined:
BODY {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: # 16387c; FONT-FAMILY: Arial
}
TD {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: # 16387c; FONT-FAMILY: Arial
}
TH {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: # 16387c; FONT-FAMILY: Arial
}
The FONT-SIZE: 12px; COLOR: # 16387c; FONT-FAMILY: Arial style is defined in the body, and the FONT of the entire page network is set to this style by default, there is no need to define it again in td and th. Although the display is OK, the Code is not concise.
I personally prefer the concise style in foreign countries. The FONT size of the pages I create is generally no more than two types. Generally, only one FONT-FAMILY and line-height are defined in the body, then the two styles are rarely displayed in other places, which ensures the uniformity of the page style.

4. Remember to add units. In ie6, margin and padding can be displayed without adding units, for example, padding: 10; but this does not comply with w3c standards, the style cannot be displayed under Firefox. We need to write the style as follows: padding: 10px; margin: 10px;

5. Set the rules before writing css. Many styles are similar. For example, the panel in the right column of the left sidebar has the same class, we don't need to define a style for each panel. For example, we can define the red font and clearboth style with a higher page appearance.

6. Write inheritance. Many write css statements are full of parent classes,
For example,. contain {}. tit {}. contents {}
In this way, the display is normal, but it is difficult to search for a large number of styles. When I used to work on the information network, there were quite a lot of page styles, and I was the type of writing the full parent class. I didn't know why, and some styles were not recognized, especially in ie6.
Therefore, we recommend that you write. contain {}. contain. tit {}. contain. contents {}

7. Streamline the Code. There are several types of codes that can be streamlined Under css.
The following border code
Border-top-style: dotted;
Border-right-style: dotted;
Border-bottom-style: dotted;
Border-left-style: dotted;
Border-top-width: 1px;
Border-right-width: 1px;
Border-bottom-width: 1px;
Border-left-width: 1px;
Border-top-color: # FFFFFF;
Border-right-color: # FFFFFF;
Border-bottom-color: # FFFFFF;
Border-left-color: # FFFFFF;

Can be abbreviated as: border: dotted 1px # fff;
Or:
Border-top: dotted 1px # fff;
Border-left: dotted 1px # fff;
Border-right: dotted 1px # fff;
Border-bottom: dotted 1px # fff;

Margin code below
Margin-top: 10px;
Margin-left: 40px;
Margin-right: 20px;
Margin-bottom: 30px;
Can be abbreviated as: margin: 10px 20px 30px 40px;

Likewise
Padding-top: 10px;
Padding-left: 40px;
Padding-right: 20px;
Padding-bottom: 30px;
Can be abbreviated as: padding: 10px 20px 30px 40px;

The following background code
Background-repeat: no-repeat;
Background-color: # fff;
Background-image: url (../images/bg.jpg );
Background-position: left top;
Can be abbreviated as: background: # fff url (../images/bg.jpg) no-repeat left top;

In fact, to write compatible, fast, and standardized code, there is also a very fast method, that is, using the css template automatically generated by Dreamweaver.
Open Dreamweaver CS3 and click "file"> "new". You can directly check the layout card on the right. There are many layout pages available for us to choose from. Choose one directly.
Click "OK" and check out the CSS code. The comments are extremely detailed and compatible with various browsers. They are not useful here! Important. (Wow! DW is so user-friendly that it will love you .)

---------------- Gorgeous split line ------------------------------

More w3c site research and research, the gains will be more than Baidu google found. Code standards are more than just said. The most important thing is multi-practice, experience is the most important, there are many problems encountered in practice. Well, that's all. I wrote my code style in this article. If you have any questions, please let us know.