Summary of front-end styles and techniques

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.