Home > Developer > Web Develop
Test environment: Windows7
Main tests: IE6, IE7, IE8, Fire Fox3.5.6
Minor tests: Chrome4.0, Opera10.10, Safari4.04, 360 browser 3.1
To enable multiple hack in the same example, the following requirements for the instance page are:
1, about two Div is #menu, #content, the font color is white.
2, #menu高度500px, #content高度600px.
3, #menu宽度200px, #content宽度是自适应 (because it is adaptive so the usual method of adding float can not solve 3pxBug).
4. Write a piece of text in #content with a red area margin of 50px.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style>
body,div{margin:0; padding:0;}
Div{color: #fff;}
#menu {width:200px; height:500px; background: #900; float:left;}
#content {height:600px; padding-left:50px; background: #36f;}
</style>
<body>
<div id= "Menu" ></div>
<div id= "Content" ></div>
</body>
- The results of the code being tested under various browsers are as follows:
- IE6
IE8, Firefox, Opera, Chrome
Through the browser test we can compare the following:
1, IE6 and IE7 effect is basically the same, but IE6 in the middle of two div appeared 3 pixels of the bug, which is also very famous IE6 3 pixel bug. Note: If you are unfamiliar with these two classic bugs of IE6, look at these two articles: "3 pixel Bug"
2. Inside the IE8 and fire Fox, the Red Area (#menu) covers the Blue area (#content).
Ask questions:
1, to solve the adaptive width of the IE6 3 pixel bug (Note: If the width is certain, only need to add floating float can be solved, but in the case of width adaptation of this method is not valid)
2. Resolve positional inconsistencies (for example, text in #content)
Workaround (use Csshack to resolve):- * HTML
IE6 and earlier versions of IE do not consider an HTML tag to be the outermost element, but rather think that * (where * does not mean a universal selector) is the outermost element, and HTML is considered its child element. In addition, if the first element floats the second element without floating, a 3-pixel bug will appear.
So since only IE6 and the lower version "understands" the HTML, it can be used as a hack to resolve incompatibilities between browsers.
Modify the code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css hack-css</title>
<style>
body,div{margin:0; padding:0;}
Div{color: #fff;}
* HTML #menu {margin-right:-3px;}
#menu {width:200px; height:500px; background: #900; float:left;}
#content {height:600px; padding-left:50px; background: #36f;}
</style>
<body>
<div id= "Menu" ></div>
<div id= "Content" ></div>
</body>
- Through the comparison of the various browsers above can be found that only IE7 and earlier (and 360 browser) display this page is the effect we want, but non-IE browser #content padding-left:50px no effect. If you are careful you may find that only IE7 and the lower (and 360 browsers) of the blue area are not covered by the red area, so set padding-left:50px; are covered by the red area, the text is open in the red area, It is also possible to say that the text in the blue area is set to padding-left:200px by default in non-IE browsers (because the width of the red area is 200px). If we want to set the padding to 50px in the non-IE browser, then we have to 250px to achieve the desired effect. But if you just set padding-left:250px, IE7 and the lower version (and 360 browsers) will really turn into 250px.
Some friends will certainly think of using _hack to solve this problem, if you do so IE7 is not compatible. Therefore, this method is not feasible.
<style>
body,div{margin:0; padding:0;}
Div{color: #fff;}
* HTML #menu {margin-right:-3px;}
#menu {width:200px; height:500px; background: #900; float:left;}
#conten {height:600px; padding-left:250px; _padding-left:50px; background: #36f;}
</style>
mainly used to distinguish between IE and non-IE browser. (ie All "understand" \9)
Although \9hack can solve the problem of #content text position in IE7 (above example), all IE so far can "understand" this hack. So IE8 is set to 250px and then set to 50px, so this hack can't solve the problem completely. The code is as follows:
<style>
body,div{margin:0; padding:0;}
Div{color: #fff;}
* HTML #menu {margin-right:-3px;}
#menu {width:200px; height:500px; background: #900; float:left;}
#conten {height:600px; padding-left:250px; padding-left:50px\9; Background: #36f;}
</style>
This means that all IE are set to the left padding is 50px;
Then the friends must have thought of, and then set up a only IE8 to know the hack, it is regrettable to tell you if from the normal thinking to understand the IE8 Csshack No. But we can think of the other way around using the exclusion method to exclude IE8.
IE8 Hack
<style>
body,div{margin:0; padding:0;}
Div{color: #fff;}
* HTML #menu {margin-right:-3px;}
#menu {width:200px; height:500px; background: #900; float:left;}
#conten {height:600px; padding-left:250px; *padding-left:50px; Background: #36f;}
</style>
The red part can be regarded as IE8 hack, because * only IE7 and lower version can parse this hack, so IE8 will skip *padding-left:50px; This code is not parsed, thereby excluding versions of IE8 below.
If the effects of IE6, IE7 and IE8 are inconsistent, how can we solve them?
Example:
If the left margin of the DIV element of IE6, IE7, IE8 is inconsistent. You can resolve this problem by setting the following:
Div
{
padding-left:250px; Parse to here ==> all IE are set to 250px
*padding-left:50px; Resolve here ==>ie6 and IE7 are set to 50px
_padding-left:30px; Resolve to here ==>ie6 set to 30px
}
Note: The order must not be wrong.
Some knowledge of CSS hack
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
