Review of WEB compatibility issues that were once confusing

The following are all compatibility issues that have made me feel difficult when I was studying CSS. Now I am sorting out some new questions. Good memory is not as bad as writing, and it is no harm to write more.

1. Double margin BUG of IE6
After floating, the external margin is 10px, but IE is interpreted as 20px. The solution is to add:

1 display: inline;

For more detailed explanations, see IE6 double margin-IE layout BUG collection

2. Why is there a gap in the image below IE6?
Set img to display: block or vertical-align to vertical-align: top | bottom | middle | text-bottom
Can be solved.
For more detailed explanations, see the excess space below the picture-IE layout BUG collection.

3. center a layer vertically in the browser
Use absolute percentage positioning. The negative value is half of the width and height of the external patch.

1 div {
2 position: absolute;
3 top: 50%;
4 left: 50%;
5 margin:-100px 0 0-100px;
6 width: 200px;
7 height: 200px;
8 border: 1px solid red;
9}

4. How to set the color of the scroll bar in Web Standard IE
In IE, the scroll bar style is written on the body element, while in WEB standards, the scroll bar style is written on html:

1 html {
2 scrollbar-face-color: # f6f6f6;
3 scrollbar-highlight-color: # fff;
4 scrollbar-shadow-color: # eeeeee;
Scrollbar-3dlight-color: # eeeeee;
6 scrollbar-arrow-color: #000;
7 scrollbar-track-color: # fff;
8 scrollbar-darkshadow-color: # fff;
9}

5. How to Make the flash Animation not cover the Layer
A. Key attributes:

1 <param name = "wmode" value = "opaque"/>
2 <embed wmode = "opaque"> </embed>

B. Adobe-based code:

1 <param name = "wmode" value = "transparent"/>

6. Unknown height vertical center
The precondition for solving this problem is that the parent layer of the image must be highly determined, and the unknown height of the image should also be the height of the parent layer, that is0 <image height <parent layer heightNote that the layer should not have too complex html structure, or it still cannot achieve perfect results. I personally think that solving this problem is purely a technical method to challenge WEB standards. In actual development, it is best to optimize the overall html Structure Code to avoid such problems.

1 <style>
2. box {
3/* vertical center method recognized by mainstream non-IE browsers */
4 display: table-cell;
5 vertical-align: middle;
6
7/* set horizontal center */
8 text-align: center;
9
10/* Hack for IE */
11 * display: block;
12 * font-size: 175px;/* It is about 0.873 of the height, and 200*0.873 is about 175 */
13 * font-family: Arial;/* prevents hack failures caused by non-UTF-8, such as gbk encoding */
14
15 width: 300px;
16 height: 200px;
17 border: 1px solid # eee;
18 overflow: hidden;
19
20}
21. box img {
22/* set the vertical center of the image */
23 vertical-align: middle;
24}
25 </style>

7. Draw a horizontal line with a height of 1 px without using the border Style

1 div. line {height: 1px; overflow: hidden; background: # 0000FF}

8. Align text and text input boxes
Define vertical-align: middle for the input element

9. A container in a standard browser should be opened when its height is fixed and the height needs to be lifted.

1 div. heightAuto {border: 1px solid # 0000FF; width: 100px; height: auto; _ height: 40px; min-height: 40px ;}

10. General Solutions for float Closure

1. clearfix: after {
2 content :".";
3 display: block;
4 clear: both;
5 visibility: hidden;
6 line-height: 0;
7 height: 0;
8}
9. clearfix {
10 display: block;
11}
12 html [xmlns]. clearfix {
13 display: block;
14}
15 * html. clearfix {
16 height: 1%;
17}