Common CSS writing skills

/*************************************** ****************************************/
Different browsers, such as Internet Explorer 6, Internet Explorer 7, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers. This process of writing different CSS codes for different browsers is called CSS hack, also called CSS hack.
Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this.
For example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores (_). Firefox cannot recognize both of them. And so on.
The writing order is generally to write the CSS of a browser with strong recognition ability behind. The following lists common CSS hack methods.

1 :! Important
! Important improves the application priority of a specified style rule.
IE7 and all standard browsers can recognize it! Important
Difference between IE6 and IE7 and other browsers
. Browsertest
{
Border: 20px solid #60a179! Important;
Border: 20px solid # 00f;
}
It can be understood when browsing in Mozilla or IE7! Important priority, so the color of #60a179 is displayed:
Cannot be understood when browsing in IE6! Important priority, so the color of # 00f is displayed:

2 :*
Ie can recognize *; standard browsers (such as Firefox) cannot recognize *
Difference between IE6 and Firefox
. Browsertest
{
Border: 20px solid #60a179;
* Border: 20px solid # 00f;
}
Difference between IE7 and Firefox
. Browsertest
{
Border: 20px solid #60a179;
* Border: 20px solid # 00f;
}
Difference between IE7, IE6 and Firefox
. Browsertest
{
Border: 20px solid #60a179;
* Border: 20px solid # 00f! Important;
* Border: 20px solid ###;
}

3 :_
IE6 supports underlines. IE7 and Firefox do not support underlines.
Difference between IE7, IE6 and Firefox
. Browsertest
{
Border: 20px solid #60a179;
* Border: 20px solid # 00f;
_ Border: 20px solid ###;
}
/* Whatever the method, the order of writing is firefox before writing, IE7 in the middle, IE6 at the end */

4: * + HTML and * html
* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also unique to IE7.
. Browsertest {width: 120px;}/* Firefox fixed */
* Html. browsertest {width: 80px;}/* IE6 fixed */
* + Html. browsertest {width: 60px;}/* IE7 fixed */
Note:
* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
/*************************************** **************************************/

/*************************************** **************************************/
Below are some common CSS compatibility skills
1) Setting padding for Div under Firefox will increase the width and height, but IE will not. (available! Important solution)

2) vertical center, set line-height to the same height of the current Div, and then use vertical-align: middle; (Note that do not wrap the content)

3) horizontally centered, margin: 0 auto; (of course not omnipotent)

4) if you need to add a style to the content of tag a, you need to set the display: block; (common in navigation labels)

5) double distance of floating IE
In IE, when float is set for a div and margin is set for it, a double margin will appear. The solution is to set display: Inline for the div.
<Div id = "float"> </div>
The corresponding CSS is
# Float
{
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}
The features of the block element are as follows: It always starts on a new line. The height, width, row height, and margin can be controlled (Block Element). The features of the inline element are as follows: on the same line as other elements ,... uncontrollable (embedded element );

6) differences between IE and FF on the box model
# Browsertest {width: pixel PX! Important; width: 648px; padding-left: 2px; Background: # FFF ;}
Browsertest shows pixel Px in width;
The total width of IE box is: width + padding + border + margin width sum;
The total width of FF box is: the width of width. The width of padding + border + margin is included in width.
If box {width: "300"; padding: "5px ";}
The width of the box in IE should be: 310
The FF width is 300.
So when the box is filled, use this method.
Box {width: "300 "! Important; width: "290 ";}

7) UL labels by default include list-style and padding under ff. It is best to declare them in advance to avoid unnecessary troubles. (common in navigation labels and content lists)

8) do not set the height of the external wrapper Div. It is best to add overflow: hidden; to achieve high self-adaptability;

9) Minimum page width
Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this,
In fact, it uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:
Then CSS is designed like this:
# Container {Min-width: 600px; width: expression (document. Body. clientwidth <600? "600px": "Auto ");}
The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.

10: Universal float Closure
Add the following code to global CSS and add the DIV to be closed
<Style>
/* Clear fix */
. Clearfix: After
{
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
* Html. Clearfix {
Height: 1%;
}
* + Html. Clearfix {
Height: 1%;
}
. Clearfix
{
Display: inline-block;
}
/* Hide from IE Mac */
. Clearfix {display: block ;}
/* End hide from IE Mac */
/* End of Clearfix */
</Style>
/*************************************** *******/
<Div id = "Wrap">
<Div class = "column_left">
<H1> float left </Div>
<Div class = "column_right">
<H1> float right </Div>
</Div>
# Wrap {border: 6px # CCC solid; overflow: auto; _ Height: 1% ;}
. Column_left {float: Left; width: 20%; padding: 10px ;}
. Column_right {float: Right; width: 75%; padding: 10px; border-left: 6px # Eee solid ;}