Home > Developer > JavaScript
Browser compatibility problems frequently encountered, browser compatibility problems
1. The default margin and padding of the browser are different. The solution is to add a global * {margin: 0; padding: 0.
2. IE6 bilateral margin bug: When the block attribute label float appears rampant, ie6 shows that the margin is larger than the setting.
Solution: 1. Add display: inline to the label style Control of float, and convert it to an in-row attribute.
2. Use hack: margin: 10px 0 0 10px; * margin: 10px 0 0 10px; _ margin: 10px 0 0 0 5px; IE7 recognition * attribute; IE6 recognition _ attribute
3. The element height in ie6 and ie7 exceeds the configured height. The reason is that the browser before IE8 will set the default Row Height for the element. The solution is to add overflow: hidden or set line-height to a smaller height.
.one{ height:5px; width:100px; background:#F60;}
The HTML hasn't changed. <div class = "one"> </div> is displayed in IE6 as follows:
At first glance, we can see more than 5px. We can change CSS to one of the following two types:
. One {height: 5px; width: 100px; overflow: hidden; background: # F60;}/* -- or --*/. one {height: 5px; width: 100px; font-size: 2px; line-height: 2px; background: # F60 ;}
Note that line-height: 2 PX must be added with font-size. Effect
4. min-height does not work in IE6. The solution is to add height: auto! Important; height: xxpx; where xx is the value set by min-height.
For some layer with variable content (such as user comments), we want it to have a minimum height (such as 30px). In this way, even if the content has only one line of words, it will not be too ugly; at the same time, we hope that when there are many contents, the height of the layer can be automatically opened, that is, the height must be: auto. In this case, you can set the min-height attribute of css. Min-height is valid in Firefox, but IE6 cannot recognize it. You can use the following solution:
.div_class{ min-height:30px; height:auto !important; height:30px; }
Set min-height: 30px In the first line; valid for Firefox; and height: auto in the second line! Important; also effective for Firefox, followed by "! Important is a specific tag for Firefox. 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 ", so only the third line is valid. Because IE is highly adaptive by default, even if the 30px height is set, as long as there is a lot of content, it will be automatically opened, without the need to set the height: auto.
! Shows the compatibility of important:
5. Transparency IE adopts filter: Alpha (Opacity = 60), while other mainstream browsers use opacity: 0.6;
6. the img Tag nested under a (with the href attribute) Tag will carry a border under IE. The solution is to add the img {border: none;} style.
7. input border problems. You can remove the input border using border: none;. However, IE6 does not work in IE6 because of the BUG in parsing the input style (priority problem.
The default CSS style of ie6 involves border-style: inset; border-width: 2px. the browser first parses its default CSS according to its own kernel parsing rules, parse the CSS written by the developer to render the tag. IE6 has a bug in the rendering of INPUT. border: none; is not parsed. When border-width or border-color is set, IE6 will parse border-style: none ;.
Solution: Use: border: 0 or border: 0 none; or border: none: border-color: transparent, The third solution is recommended.
8. The use of margin between parent and child tags is manifested in the fact that sometimes the browser sub-tag margin except IE (6/7) is transferred to the parent tag, and there is no transfer under IE6 & 7. 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 effects of chrome & FireFox & IE8 & IE9 are as follows:
Effects of IE6 and IE7:
For the two display effects, I think IE6 and IE7 are correct. I don't know if any friends can explain them.
The solution is to use padding for the interval between parent and child labels, and margin for sibling labels.
9. Assume that the first div is floating while the second div is not floating. The second div in IE6 will run to the edge of the first div, and there is still a gap between the two, however, the second block in the standard browser overlaps with the first one. 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:
In IE6:
The solution is to change the design philosophy. If there is a need to overlap two divs, you can use the following code:
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
