Knowledge of CSS Hack and CSSHack
Test environment: Windows 7
Main tests: IE6, IE7, IE8, Fire Fox3.5.6
Secondary tests: Chrome4.0, Opera10.10, Safari4.04, 360 browser 3.1
To enable multiple Hack instances in the same example, the following requirements are imposed on the instance page:
1. There are two divs on the left and right: # menu, # content. The font color is white.
2. # menu Height: 500px; # content Height: 600px.
3. # menu width 200px, # content width is adaptive (because it is adaptive, the commonly used float method cannot solve 3 pxBug ).
4. Write a piece of text in # content and the margin with the red area is 50px.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>
<Body>
<Div id = "menu"> </div>
<Div id = "content"> </div>
</Body>
</Html>
- The test results of the Code in various browsers are as follows:
- IE6
IE8, firefox, Opera, Chrome
Through the browser test, we can compare:
1. The comparison between IE6 and IE7 is basically the same, but IE6 has a three-pixel Bug in the middle of the two divs, which is also a very famous IE6 three-pixel Bug. Note: If you are not familiar with IE6's two classic bugs, read these two articles: 3 pixel Bug.
2. In IE8 and Fire Fox, the red area (# menu) covers the blue area (# content ).
Raise questions:
1. Solve the IE6 3 pixel Bug in the case of adaptive width (Note: if the width is fixed, you only need to add floating float, but this method is ineffective when the width is adaptive)
2. Solve location inconsistency (for example, # text in content)
Solution ):* Html
IE6 and earlier versions of IE do not regard Html tags as the outermost element, but think * (where * does not refer to the generic selector) is the outermost element, HTML is considered as its child element. In addition, as long as the first element floats and the second element does not float, a three-pixel bug occurs.
Therefore, since only IE6 and earlier versions "understand" * HTML, it can be used as a hack to solve the incompatibility between browsers.
The modification code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>
<Body>
<Div id = "menu"> </div>
<Div id = "content"> </div>
</Body>
</Html>
- By comparing the various browsers above, we can find that only the page displayed by IE7 and earlier versions (and 360 browsers) is what we want, however, the # content padding-left: 50px of non-IE browser is ineffective. If you are careful enough, you may find that only the blue areas of IE7 and earlier versions (and 360 browsers) are not covered by the red area, so set padding-left: 50px; the text is overwritten by the red area. You can also 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 internal margin to 50px in a non-IE browser, we have to set it to 250px to achieve the desired effect. However, if only padding-left: 250px is set, IE7 and earlier versions (and 360 browsers) are actually changed to 250px.
Some may think of using _ Hack to solve this problem. In this case, IE7 is incompatible. 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>It is mainly used to distinguish IE from non-IE browsers. (IE "understands" \ 9)
Although \ 9Hack can solve the problem of # content Text Location in IE7 (in the example above), all IE can "understand" this Hack so far. Therefore, IE8 is set to 250px and then to 50px. Therefore, this Hack cannot completely solve the problem. 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 servers are configured with a left margin of 50px;
So my friends must have thought of it. I will set another Hack that only Internet Explorer 8 knows. I am sorry to tell you that CSSHack for Internet Explorer 8 is not available if you understand it from a normal idea. However, we can think about how to exclude IE8 by division.
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 the Hack of IE8. Because * Only IE7 and earlier versions can parse this Hack, IE8 skips * padding-left: 50px; does not parse this code, to exclude versions earlier than IE8.
If the effects of IE6, IE7, and IE8 are inconsistent, how can this problem be solved?Example:If the left outer margin of the DIV elements of IE6, IE7, and IE8 is inconsistent. You can make the following settings to solve this problem:
Div
{
Padding-left: 250px; // resolution to here ==> all IE settings are 250px
* Padding-left: 50px; // resolution to this point ==> set IE6 and IE7 to 50px
_ Padding-left: 30px; // resolution to here ==> IE6 is set to 30px
}
Note: The sequence must be correct.
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
