Summary of front-end styles and techniques

To sum up the differences, skills, and experiences between IE and FF and chrome, I know that there are still many issues that have not been summarized. However, I will continue to learn more in the future ~

1. IE6 and IE7 do not support setting display: inline-block for inline Elements

Setting display: inline-block, IE6, and IE7 for block-level elements is not supported. When you browse the page on IE7 and IE6, you find that the UL list is different from that on IE8 +. You may want to check whether Li is configured with inline-block.

Set display: inline-block for inline elements. All elements are supported.

 

2. IE6 and IE7 do not support rgba.

You can use rgba for background elements in IE8 +. rgba sets the background color and specifies the transparency.

 

3. IE6, IE7, and IE8 do not support HTML5 tags. ie9 and later support HTML5 tags.

If the label

 

4. When you use position: relative to locate IE6, the layout will be lost, leading to page disorder.

Position: absolute is usually used for absolute positioning, and position: relative is used for relative positioning, so that absolute positioning has a reference point. If the position: relative element is not used for re-layout, you will find that the effect cannot be achieved in IE6. Therefore, to be compatible with IE6, you must obtain the layout again. You can set zoom, height, and width to obtain the layout;

For example, div {position: relative; * ZOOM: 1 ;}

 

5. overlay the outer margin

We know that the box model overlays the outer margin. If both divs have margin-top, the outer margin is superimposed and a large value is taken as the margin-top.

For example:

<Div id = "A">
<Div id = "B"> </div>
</Div> # A {Height: 100px; width: 100px; margin-top: 10px ;}
# B {Height: 50px; width: 50px; margin-top: 15px ;}

The result is that element B is above a, and A and B have 15 PX margin-top.

If you want to implement the effect that B is 15px relative to amargin-top, and amarign-top is 10px, you need to set the border or padding for a to achieve the effect. Use style:

 

# A {Height: 100px; width: 100px; margin-top: 10px; padding-top: 1px ;}
# B {Height: 50px; width: 50px; margin-top: 14px ;}

 

To be continued...

 

 

 

Summary of front-end styles and techniques