Home > Developer > Web Develop
What is a browser compatibility issue? The so-called browser compatibility problem, refers to because different browsers have different parsing of the same code, resulting in the page display effect is not uniform situation. In most cases, our demand is that no matter what browser the user uses to view our website or to login to our system, it should be a unified display effect. So browser compatibility is a problem that front-end developers often encounter and must solve.
Summarize the browser compatibility issues I encountered when I wrote the code and learn from you.
One, solve the problem that cannot set 1px high container (div) under IE6.
Let's look at this section of code:
<div style= "height:1px;width:100px;border:1px solid #000;" ></div>
Of course, this code is capable of setting a 1px height div (as shown on the left) under non-IE6, but the effect in IE6 is as shown on the right:
Non-IE6 under: IE6:
Solution: Add a space character ( ) inside the div to create the content, and then set the line-height:1px;
<div style= "height:1px;width:100px;border:1px solid #000; line-height:1px;" > </div>
Second, the transparency opacity incompatibility question, opacity is belongs to the css2.1 content, does not support in IE6 (also position:fixed, also css2.1 content, does not support IE6).
Create a div with a width height of 100px, set the opacity to 0.5, and the background color black as follows:
<style>
div{
height:100px;
width:100px;
opacity:.5;
Background: #000;
}
</style>
<div></div>
The following are: Non-IE6 on the left and IE6 on the right
Non-ie6:ie6:
You will see that the property is not supported in IE6, the solution:
<style>
div{
height:100px;
width:100px;
opacity:.5;
Filter:alpha (OPACITY=50); Solve IE6 problems
Background: #000;
}
</style>
<div></div>
Third, the horizontal double margin bug under IE6. A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.
The first thing to do is to trigger such a bug, the following conditions are met:
1. Element must float (float);
2. Elements must have transverse margin,margin-left, margin-right
3. Element must block element
4. The browser must be IE6.
The above conditions are indispensable, so as long as not IE6, there is no problem. The solution is simple and destroys one of the conditions.
For example:
<Head> <MetaCharSet= "UTF-8"> <title>Test browser compatibility issues</title> <style>Body{background:#fff; }. Wrap{width:300px;Height:150px;margin:50px Auto;Border:2px solid #333;Overflow:Hidden; }. Wrap Div{Height:100px;width:100px;background:#333;float: Left; Margin-left:20px; } </style></Head><Body> <Divclass= "Wrap"> <Div></Div> <Div></Div> </Div></Body>
The following are: Non-IE6 on the left and IE6 on the right
You can see that the left side of the IE6 is the Margin-left value is 40px, Solution: Set Display:inline, convert it to a row property.
Four, IE6 if the picture set on a label will default to have border.
img{
width:100px;
height:100px;
}
<a href= "# # #" ></a>
The following are: Non-IE6 on the left and IE6 on the right
This problem is relatively easy to solve, as long as the picture is set border:none; It is important to note that the border value of the A tag is set, but the picture is set.
The transparency effect of PNG format picture is not supported under IE6.
Solution: Use the plug-in: Dd_belatedpng.js plug-in (if required, can be self-baidu:))
Explain how to use: Paste the following code to
<!-- [If IE 6]> <script src= "js/dd_belatedpng_0.0.8a.js" ></script> <script> dd_ Belatedpng.fix (' * '); </script> <![ ENDIF] -Six, mention has the layout haslayout. Said browser compatibility problem has to mention haslayout.
In IE6, 7, sometimes there is no trigger to have the layout. What is Haslayout? My understanding is that if the element (tag) has a layout, then it will get its own default style, the layout will follow this default standard layout, that is, the layout is normal. However, if the element does not have a default layout, is the layout messy? (Because the style we give is on the element that has the layout [default Style]). So in this case, we have to trigger this owning layout, triggering haslayout.
There are a number of ways to trigger Haslayout:
1, the most commonly used is also the safest method: to the element without haslayout set zoom:1; (In fact, it is not 1 is not important, as long as the exception of none outside the value). It's the safest thing to say because other browsers don't know it at all.
2. Set height: Any value except Auto.
3, set the float.
4. Set width: Any value other than auto.
Seven, introduce the box model of 2 modes.
For the box model, you should also be familiar with, here is just a description of the 2 modes: Standard mode and weird mode
Standard mode: Typically in a non-ie low browser. Calculation method: The width of the occupied space = the width of the content + the width of the left and right margins + the width of the left and right margins + the width of the left and right margin (margin + padding+ border+ content)
Weird mode: Weird mode refers to the calculation method of the box model in IE6 and earlier IE versions: Total space width = content + margin (content+margin)
The similarities and differences between them are also very easy to see:
The same points: all are made up of margin, border,padding,content
Different points:: The calculation of the width/height method is different, the total width of the box in the standard mode is derived from the addition of margin,padding,border,content; in weird mode: The total width is derived from the content minus padding, border.
Eight, browser compatibility there are other problems, time is limited there is no one by one explanation, the following mention:
①: img has gaps in each browser (reason: Enter)
②:ie6, the maximum width, height, and minimum width height are not recognized, meaning that min-width/height and max-width/height are not effective in IE6,
③:3 pixel problem: IE6, there is a three-pixel problem between floating elements and flow elements when they are displayed in parallel. (Solution with Hack)
④: Confusion occurs when the inline element is defined as a containing box, and the containing box contains an absolute positioning element that is positioned in percentage units (zoom:1)
⑤: When multiple floating elements are interspersed with HTML comment statements, if the floating element width is 100%, the next line displays the last character of the previous line more than one.
⑥: Two block elements, vertical margin values do not increase, overlap, and their spacing is the maximum margin value.
⑦: Priority: The CSS attribute noted by!important has the highest priority (. abc{color:red!important;}). However,!important has a bug in IE6:!important does not work in the same set of CSS properties.
⑧: Firefox does not recognize Background-position-y or background-position-x;
⑨:IE6 does not support fixed (mentioned earlier)
⑩: Solve the IE6 maximum, minimum width and height hack method (this explanation)
/ * Minimum width */.min_width{ min-width:300px ; < ? "300px": This.clientwidth);} /* Maximum width */.max_width{ max-width:600px ; > 600? "600px": This.clientwidth);} /* min . height */.min_height{ min-height:200px; < ? "200px": This.clientheight);} /* Maximum height */.max_height{ max-height:400px ; > 400? "400px": This.clientheight);}①①:z-index a bug that doesn't work
Nine, CSS hack: front-end developers based on different browsers and different versions of the specific CSS style, popular understanding is specifically for different browsers to set their own style.
Hark of each version of IE, the code indicates:
. bb{
height:32px;
Background-color: #f1ee18; / * All recognition * /
. Background-color: #00deff \9; /*ie6, 7, 8 identification */
+background-color: #f1ee18; /*IE6, 7 identification */
_background-color: #f1ee18; /*ie6 Recognition * /
}
< div class = "BB" ></ div >
Like the PNG image does not support the insertion of code, this hack used in a dedicated browser, the use of the following: There are many classes.
<!--[if IE 6]> <script src= "js/dd_belatedpng_0.0.8a.js" ></script> <script>
dd_belatedpng.fix (' * '); </script> <![ Endif]-->Symbol |
Meaning |
Example |
！ |
Non-operator |
<!--[if! ie]><!--> In addition to IE can be recognized <!--<! [endif]--> <!--[if! ( IE 6)]> can be identified <! except IE6 [endif]--> |
Lt |
Less than smaller than |
<!--[If LT IE 8]>ie8 the following version <! [endif]--> |
Gt |
Greater than greater than |
<!--[if GT IE 8]>ie8 above version <! [endif]--> |
Lte |
Less than or equal smaller than or equal to |
<!--[If LTE IE 8]>IE8 and IE8 the following versions <! [endif]--> |
Gte |
Greater than or equal greater than or equal to |
<!--[if GTE IE 8]>IE8 and IE8 or later <! [endif]--> |
| |
Or operator |
<!--[If IE 8 | IE 7]>ie7 or IE8 version <! [endif]--> |
& |
With operator |
<!--[if GT IE 6&! IE 8]> In addition to IE8 outside the IE6 version <! [endif]--> |
/* Class internal hack:*/ . Header {_width:100px;} /* IE6 dedicated */ . Header {*+width:100px;} /* IE7 dedicated */ . Header {*width:100px;} /* IE6, IE7 shared */ . Header {width:100px\0;} /* IE8, IE9 shared */ . Header {width:100px\9;} /* IE6, IE7, IE8, IE9 shared * * . Header {width:330px\9\0;} /* IE9 dedicated *//* selector hack:*/ *html. header{} /*ie6*/ *+html. header{} /*ie7*/Common browser compatibility issues, box Model 2 modes and CSS hack knowledge explained
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
