Why compatibility problems?
Since many browsers on the market species, and different browsers that do not do the same kernel, so each browser parses the web page there is a certain discrepancy, which is the leading cause of browser compatibility problems, we need to mainstream website run properly on your browser, you need to make the browser compatible.
Use Trident kernel browsers: IE, Maxthon, TT; use the Gecko browser kernel: Netcape6 and above, FireFox; using Presto browser kernel: Opera7 and above; use Webkit-browsers: Safari, Chrome.
And I said compatibility issues, main point is that IE with several major browsers like firefox, google and so on. While IE browsers, IE7 is a span, because the previous version of the update is very slow, bug very much. From the start IE8, IE browser gradually follow the standard, due to IE9 after we all agreed that the standard is very important, it can be said on the compatibility is better, but in China, because the share of problem xp using IE7 following users are still a lot, so we have to consider compatible with earlier versions of the browser.
Browser compatibility issues, generally divided, HTML, Javascript-compliant, CSS-compatible. Which html-related issues easier to handle, is nothing more than a higher version browser with elements of low version of the browser does not recognize, it can not lead to resolution, so the point is usually pay attention. In particular, HTML5 adds many new label, low version of the browser a bit of progress of the times ah
One problem: different browsers default label Different patches and patch within
Symptoms of the problem: the case just write a few labels, without style control their margin and padding quite different.
Encounter frequency: 100%
Solution: css in * {margin: 0; padding: 0;}
NOTE: This is the most common and most easily solved by a browser compatibility issues, almost all css files beginning with wildcards will * set the patch inside and outside of each tab is 0.
Two problems: the block attribute tag float, the margin where there is rampant, shown in ie6 margin larger than the set
problem Symptoms: Common symptoms later in ie6 is a top to the next line is
encountered Frequency: 90% (slightly more complex point page comes across, float layout of the most common browser compatibility issues)
solution: Add display the label style control float in: inline; which was converted to inline attribute
Notes: our most commonly used is the div + css layout of the , and div is a typical block attributes label, horizontal layout when we are usually implemented with a float div transverse pitch margin setting if implemented, which is bound to a compatibility problem encountered.
Question three: set a lower height label (generally less than 10px), in ie6, ie7, travel beyond their height Sets the height of
the symptoms of the problem: a high degree of control ie6,7 and travel in this label, exceed the height set up their own
encounter frequency: 60%
solution: label set to exceed the height of the overflow: hidden; set the row height, or line-height less than the height you set.
NOTE: This occurs in the background we set up a small fillet tag. This problem occurs because the previous ie8 browser will default to tag a minimum row height height. Even if your tag is empty, the height of the tag will still reach the default row height.
Question 4: inline Properties tab, set the display: block after using float layout, there are cases of rampant margin, ie6 spacing bug (similar to the second)
symptom of the problem: ie6 in pitch than the pitch exceeds the set
hit chance: 20 %
solution: display: block; back added display: inline; display: table;
Remarks: inline properties tab, in order to set the width and height, we need to set display: block; (except special input tag). After the float with the layout and the lateral margin, at ie6, he has a lateral margin bug block attributes after float. But because it is itself within the property line tag, so we add display: inline, then it can not be located on the aspect. This time we also need to display: adding display behind inline: talbe.
Question 5: Image has default spacing
symptom of the problem: img tag put together a few times, some browsers will default spacing, the problem plus a wildcard mentioned does not work.
Hit probability: 20%
Solution: Use the float property layout img
NOTE: Because the img tag is inline attribute labels, so they do not exceed the width of the container, the img tag will be ranked on a single line, but will be among the img tag part of the browser there spacing. This spacing is used to remove the right way float
Question six: Label set min-height minimum height is not compatible
symptom of the problem: because the min-height itself is an incompatible css properties, it is not good to be compatible with various browsers when setting min-height
hit probability: 5%
solved Solution: If we want to set the minimum height of a label 200px, settings required for: {min-height: 200px; height: auto important; height:! 200px; overflow: visible;}
Note: B / S system headend apart when there is in many cases we have this demand. When the content is less than a value (e.g., 300px). Height of the container is 300px; height when the content is greater than this value, the height of the container support is high, rather than the scroll bar. This time we will be faced with this compatibility problem.
Question seven: transparency compatible css setting
method is: each write a piece of code (or a layout in a row) we all are compatible in different browsers seen, of course, to a certain degree of proficiency no such trouble. Recommended for novice often encounter compatibility issues. Many compatibility issues are different because the browser default attribute tag parsing result, as long as we can easily set up a little to resolve these compatibility issues. If we are familiar with the default property of the label, then you can well understand why there will be compatibility problems and how to resolve these compatibility issues.
A skills: css hack
I can use the hacker browser into three categories: ie6; ie7 and travel; other (ie8 chrome ff safari opera, etc.)
hacker ie6 understanding of an underscore _ and the asterisk *
Hacker IE7 travel recognize that asterisk * (including 6 of the above problems can be considered a hack of important but less practical!..)
For example, such a set css height: 300px; * height: 200px; _height: 100px;
ie6 browser to read height: 300px time will be considered at high 300px; read on, he recognized * heihgt, so when ie6 read * height: 200px time will conflict before overwriting a setting that height is 200px. Read on, ie6 also recognized _height, so he will overwrite the settings 200px high, the height is set to 100px;
IE7 and travel is the same read from a height of 300px set down. When they read * height200px would stop, because they do not know _height. So they will be resolved to a height 200px;
the rest of the browser only recognize the first height: 300px; height so they will resolve to 300px.
Because the same and conflicting attributes a priority setting will overwrite the previous one, so the order of writing is very important.
/ * CSS attribute level Hack * /
Color: Red; / * all browser recognizes * /
_Color: Red; / * Only IE6 recognition * /
* Color: Red; / * IE6, IE7 recognition * /
+ Color: Red; / * IE6, IE7 recognition * /
* + Color: Red; / * IE6, IE7 recognition * /
[Color: Red; / * IE6, IE7 recognition * /
Color: Red \. 9; / * IE6, IE7, IE8, IE9 identifying * /
Color: Red \ 0; / * IE8, IE9 recognition * /
Color: Red \. 9 \ 0; / * only IE9 recognition * /
Color: Red \ 0; / * only IE9 recognition * /
Color: Red Important! ; / * IE6 does not recognize the important risk of * /!
/ * * the CSS selectors stage Hack /
* {HTML #demo Color: Red;} / * IE6 identified only * /
* + {HTML #demo Color: Red;} / * only IE7 recognition * /
body: type-of-Nth (. 1) {#demo Color: Red;} / * IE9 +, + in FF3.5, the Chrome, Safari, Opera may identify
* /
head: First-body Child # + demo {color: red;} / * IE7 +, FF, Chrome, Safari, Opera may identify * /
: Root #demo {color: red \ 9;}: / * * Only IE9 identification /
The less floating, the less code, there will be more flexible page, there will be more scalable page. That much said, comes down to a certain level, the float will be used less. In addition, you will also avoid the use of float + margin of usage. So, the later the more difficult encounter this bug.
Skills II: padding, marign, height, width
Note that technique, not a method: written standard header http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml"> try with padding, caution margin, height try to make up 100%, with a setpoint height parent child height not 100%, the child full complement float when empty clear bottom: both possible with a wide margin of div, padding caution , width to be considered quasi-real minus padding.
Skills III: class display (display: block, inline)
display: block, inline two elements
display: block; // can be modeled as elements embedded block elements
display: inline; // achieve the same effect rows of
display: table; // for FF, simulation results table
display : characteristics of block block elements, the elements are: always start on a new line; height, the line height and the top and bottom margins can be controlled; default width is 100% of its container unless a set width
display: inline is an element displayed as a feature of inline elements, the elements are: and other elements on a single line; high, high line and the top and bottom margins can not be changed; width is its text or image width can not be changed. span, a, label, input, img, strong and em are examples of inline elements.
Four Skills: How to make a div layer centered in the browser?
1.
<style type = "text / CSS">
<- div {!
position: Absolute;
Top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
border: 1px Red Solid;} ->
</ style>
2.div the contents, IE default to center, left-aligned and the default is FF, the code can try to increase the margin: 0 auto;
Five Tips: float a div closed; Clear float; highly adaptive
① 例如：＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">
NOTfloatC here do not want to continue the translation, but hope down the row. (Wherein floatA, floatB attribute has been set to float: left;)
code in IE no problem, the problem in FF. The reason is NOTfloatC not float the label, the label must float closed. Between <divclass = "floatB"> < div class = "NOTfloatC"> plus <div class = "clear"> this div must pay attention to the position, and must have the same level with the two float div properties between nesting relationship can not exist, or will cause an exception. And clear as this style is defined as follows to: .clear {clear: both;}
② div outer wrapper as not to set the height of death, in order to allow the height of adaptively, to add the wrapper inside the overflow: hidden; when when included in the box float, highly adaptive invalid in IE, this time should trigger IE's layout private property (IE evil ah!) with a zoom: 1; can be done, so that to achieve compatibility.
For example, a definition of a wrapper as follows:
{overflow .colwrapper: hidden; Zoom: 1; margin: 5px Auto;}
③ for typesetting, we mostly use css description is probably float: left sometimes we do need a unified behind the float div n bar. background, such as:
<div the above mentioned id = "Page">
<div the above mentioned id = "left"> </ div>
<div the above mentioned id = "Center"> </ div>
<div the above mentioned id = "right"> </ div>
</ div>
For example, we to set the page background of blue, to achieve all three columns background color is blue purpose, but we found that with the left centerright down the stretch, while the page is actually saved the same height, the question is, reasons that the page is not float property, and our page due to the center, it can not be set to float, so we should be resolved:
<div ID = "Page">
<div ID = "BG" style = "a float: left; width: 100%">
<div ID = "left"> </ div>
<div ID = "Center"> </ div>
<div ID = "right"> </ div>
</ div>
</ div>
re-embedding float left and a width of 100% solution dIV.
④ universal float closed (very important!)
On clear float principle can be found in [How To ClearFloats Without Structural Markup], the following code is added Global CSS, the need to add a closed div class = "clearfix" can be, tested.
/ * * Fix the Clear /
.clearfix: After {Content: "."; The display: Block; height: 0; Clear: both; visibility: hidden;}
.clearfix {the display: inline-Block;}
/ * Hide from the Mac IEs * /
.clearfix {the display: block;}
/ * End hide IEs from the Mac * /
/ * End of clearfix * /
or arranged such: .hackbox {display: table; // display the object as a table level block element}
Tip 6: y-axis issues padding and marign when nested div
Div sub-FF in the y-axis from the parent to the parent padding + div sub marign
IEs in the y-axis from the parent sub-div div to parent and child marign padding in a big
FF in the y-axis parent padding = 0 and border = 0, the sub div is from 0 to parent div sub marign acting outside the parent div