Frequently encountered browser compatibility issues_html/css_WEB-ITnose

1. The default margin and padding of browsers are different. The solution is to add a global *{margin:0;padding:0;} to unify.

2. IE6 double-margin bug: after the block attribute label is floated and there are horizontal margins, the margin displayed in IE6 is larger than the set value.

Solution: 1. Add display:inline; to the float label style control to convert it into an inline attribute.

2. How to use hack: margin: 10px 0 0 10px; *margin: 10px 0 0 10px; _margin: 10px 0 0 5px; IE7 recognizes the * attribute; IE6 recognizes the _ attribute

3. In ie6 and ie7, the element height exceeds the height set by yourself. The reason is that browsers before IE8 set the default row height for elements. The solution is to add overflow:hidden or set line-height to a smaller height.

.one{    height:5px;    width:100px;    background:#F60;}

The HTML has not changed, it is still 06001a16c1782d0d0c880641f27863e716b28748ea4df4d9c2150843fecfba68, which is displayed as:

You can tell at a glance that this is more than 5px. Just change the CSS to one of the following two:

.one{    height:5px;    width:100px;    overflow:hidden;    background:#F60;}/*--或--*/.one{    height:5px;    width:100px;    font-size:2px;    line-height:2px;    background:#F60;}

Note that after adding line-height: 2px here, Just add font-size. The effect is as shown below:

4. min-height does not work under IE6. The solution is to add height:auto !important;height:xxpx;where xx is the value set by min-height.

For some layers with variable content (such as user comments), we hope that it has a minimum height (such as 30px), so that even if the content is only one line of text, it will not be too ugly; at the same time It is hoped that when there is a lot of content, the height of the layer can be automatically expanded, which means height: auto is required. At this time, you can set the min-height attribute of css. min-height works in Firefox, but IE6 doesn't recognize it. You can use the following solution:

.div_class{ 　　min-height:30px; 　　height:auto !important; 　　height:30px; } 

The first line setting min-height:30px; is valid for Firefox; the second line height:auto !important; is also valid for Firefox, The "!important" that follows is a Firefox-specific tag. The settings with this tag have the highest priority, and subsequent settings are invalid. Therefore, the height: 30px in the third line is invalid for Firefox; at the same time, because IE6 cannot recognize min-height and "! important", only the third line is valid. Since IE is highly adaptive by default, even if 30px is set The height will be automatically expanded as long as there is a lot of content. There is no need to set height:auto.

!important compatibility is shown in the figure below:

5. Transparency IE uses filter:Alpha (Opacity=60), while other mainstream browsers use opacity: 0.6;

6. The img tag nested under the a (with href attribute) tag will have a border under IE. The solution is to add an img{border:none;} style.

7. Input border problem. Generally, you can use border:none; to remove the input border. However, due to a BUG (priority issue) in IE6 when parsing the input style, it is invalid under IE6.

The default CSS style of ie6, which involves border, is border-style:inset;border-width:2px; the browser first parses its own default CSS according to its own kernel parsing rules, and then parses what the developer wrote CSS to achieve the purpose of rendering tags. There is a bug in IE6's rendering of INPUT. border:none; is not parsed. Only when border-width or border-color is set will IE6 parse border-style:none;.

The solution is to use: border:0 or border:0 none; or border:none:border-color:transparent;. The third solution is recommended.

8. The problem of using margin between parent and child tags is that sometimes the margin of child tags in browsers other than IE (6/7) is transferred to the parent tag, but it is not transferred under IE6&7. The vertically adjacent border margins of two or more block-level boxes overlap, and the resulting border width is the largest of the adjacent border widths. Horizontal margins never coincide. Test code:

<body>    <style type="text/css">        .box1{            height:150px;            background:#CCC;        }        .box1_1{            height:50px;            margin-top:50px;            background:#AAA;        }    </style>    <div class="box1">        <div class="box1_1">box1_1</div>    </div></body>

The effect under chrome & FireFox & IE8 & IE9 is:

IE6 & The effect under IE7:

For these two display effects, I think IE6&IE7 are correct. I wonder if anyone can give an explanation.

The solution is to use padding between parent and child tags and margin between sibling tags.

9. Suppose there are two divs. The first one floats and the second one does not float. Under IE6, the second one will run to the edge of the first one, and there will still be a gap between them, but In standard browsers, the second block overlaps the first block. Test code:

<body>    <style type="text/css">        div{            width:100px;            height:100px;            border:1px solid #CCC;        }        .one{            float:left;            height:50px;        }    </style>    <div class="one">One</div>    <div class="two">Two</div></body>

Normally it should be:

In IE6 it is:

The solution is to change the design idea. If there is a need for two divs to overlap, you can use the following code to achieve it:

<body>    <style type="text/css">        div{            width:100px;            height:100px;            border:1px solid #CCC;        }        .parent{            position:relative;        }        .one{            position:absolute;            left:0;            top:0;        }    </style>    <div class="parent">        <div class="one">One</div>        <div class="one">Two</div>    </div></body>