Objective:
As a professional front-end developers, browser compatibility is a problem we will inevitably encounter, today, in my personal opinion, I would like to tell you a big browser of the cleansing problem.
In simple terms, a big browser uses a different kernel version, with its own kernel. One has to say IE6, 7. As our front-end personnel, ie undoubtedly become a major obstacle to our front-end developers, some people say IE is a garbage browser, is a wonderful browser. And why use it, that is, it occupies an important position in the market. In fact, in the long ago, ie occupied the majority of the browser market owners supremacy, Google, Firefox as the representative of the browser business in order to compete for the market, re-carve the browser market this big cake, so the organization developed a w3cschool such a set of norms to contend with IE. This is how Internet Explorer and the big browser under the web will have so many compatibility issues. In fact, the browser compatibility reason is very simple that is because IE before the birth of the Internet. Before the birth of the Internet, IE has its own set of standards for implementation. Google, Firefox as the representative of the browser business will designate a set of their own standards, the root cause is to compete for market power. Two words of "interest". In fact, IE is not wrong, we can not only see the side of things, but also to see the nature of the real. In philosophical terms, we need to rise from perceptual knowledge to rational knowledge to grasp the essence of things through the appearance of things. Can see in later IE8, ie in order to survive in the market, only to compromise. Slowly approaching the standard for the ...
The following is a CSS problem, because a little bit of layout bug, may cause the entire page dislocation, in the user's opinion this is very unprofessional.
Now I would like to briefly say my understanding of CSS compatibility issues: First say a little hack knowledge (the real master is not hack, but to become a master must pass the hack this off)
| 1234567891011121314151617181920212223242526272829303132333435363738394041 |
/* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* 仅IE6 识别 */ *color:red; /* IE6、IE7 识别 */ +color:red; /* IE6、IE7 识别 */ *+color:red; /* IE6、IE7 识别 */ [color:red; /* IE6、IE7 识别 */ color:red\9; /* IE6、IE7、IE8、IE9 识别 */ color:red\0; /* IE8、IE9 识别*/ color:red\9\0; /* 仅IE9识别 */ color:red \0; /* 仅IE9识别 */ color:red!important; /* IE6 不识别!important 有危险*//* CSS选择符级Hack */ *html #demo { color:red;} /* 仅IE6 识别 */ *+html #demo { color:red;} /* 仅IE7 识别 */ body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */ :root #demo { color:red\9; } : /* 仅IE9识别 *//* IE条件注释Hack */ <!--[if IE 6]>此处内容只有IE6.0可见<![endif]--><!--[if IE 7]>此处内容只有IE7.0可见<![endif]--> |
Why browsers have compatibility issues