What is CSS hack? Because of different browser For example, Internet Explorer 6, Internet Explorer 7, Mozilla Firefox, etc., have different understanding of CSS parsing, which will lead to different page effects generated and the page effects we need will not be obtained.
At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and can get the page effect we want in different browsers.
This process of writing different CSS codes for different browsers is called CSS hack, or writing CSS hack.
What is the principle of CSS Hack
Because different browsers have different CSS support and parsing results, and also because of the priority relationship in CSS. We can write different CSS for different browsers according to this.
such as IE6 IE7 can recognize the underscore "_" and the asterisk "*", while IE7 can recognize the asterisk "*", but cannot recognize the underscore "_", and firefox cannot recognize both. wait
The writing order is generally to write the CSS of the browser with strong recognition ability in the back. The following is how to write it in more detail.
How to write CSS Hack
For example, to distinguish between IE6 and Firefox, you can write as follows:
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
I see red in IE6 and green in Firefox.
Explain:
In Firefox, the above CSS can't recognize what the following thing with an asterisk is, so it filters it out and ignores it. The result of parsing is: div {background: green}, so of course the background of this div is green.
In IE6, the two backgrounds can be identified. The result of its analysis is: div {background: green; background: red;}. Therefore, according to the priority level, the red behind has a higher priority. Of course, the background color of this div is red.
CSS hack: distinguish between IE6, IE7 and firefox
Different browsers, CSS hack writing method:
Distinguish IE6 from FF:
background:orange;* background:blue;
Distinguish IE6 from IE7:
background:green ! important; background:blue;
Distinguish IE7 from FF:
background:orange; * background:green;
Distinguish FF, IE7, IE6:
background:orange;* background:green;_ background:blue;
background:orange;* background:green ! important;* background:blue;
Note: IE can identify *; The standard browser (such as FF) does not recognize *;
IE6 can recognize *, but not! important,
IE7 can recognize *, and can also recognize! important;
FF can't recognize *, but it can! important;
IE6 IE7 FF
* √ & radic; & times;
! important × & radic; & radic;
Browser priority: FF<IE7<IE6, CSS hack writing order is generally FF IE7 IE6
Take: "# demo {width: 100px;}" as an example;
#Demo {width: 100px;}/* Executed by FIREFOX, IE6, IE7*/
*Html # demo {width: 120px;}/* will be executed by IE6, and the previous definition will be overwritten later, so the width of # demo in IE6 is 120px*/
*+Html # demo {width: 130px;}/* will be executed by IE7*/
---------------
So finally, the width of # demo is interpreted as follows in the three browsers:
FIREFOX:100px;
ie6:120px;
ie7:130px;
======================Gorgeous dividing line======================
In CSS! Important is a very important attribute, which sometimes plays a very important role. 52CSS. com does not have much knowledge about it. Let's look at the following article to learn about it.
When I wrote some CSS code a few days ago, it was hard for me because that damned IE6's support for CSS was so poor. I hadn't noticed it before, because everything I did was basically based on Internet Explorer. However, the CSS I wrote for my blog this time should support more than Internet Explorer. The hateful thing is that I installed Windows 7, which comes with Internet Explorer 8, I thought I had no problem, but when I opened IE6, there was still dislocation, so I decided to see what was going on in IE6.
I wrapped all CSS blocks with frames. The result shows that the distance between two divs in IE is obviously wider than that of other browsers. For example, if you write a div with a margin attribute of 20px, it will be like 40px in IE, which is why the original precision calculation is just good, but it is misaligned in IE.
Then I saw it! In fact, the important attribute is also in the css specification. As a result, IE6 does not support it. Because it does not support it, many CSSers have found a solution. Generally speaking, in CSS, if two identical attributes are written in the same CSS block, they are actually executed according to the bottom, such as:
view plaincopy to clipboardprint?
.home{
margin-left:20px;
margin-left:40px;
}
.home{
margin-left:20px;
margin-left:40px;
}
When executing, it is executed according to 40px,! Important appears to allow users to set the priority of executed statements. If the above statement is changed to:
view plaincopy to clipboardprint?
.home{
margin-left:20px! important;
margin-left:40px;
}
.home{
margin-left:20px! important;
margin-left:40px;
}
In Firefox, Google browser, and IE7 and above versions, 20px will be used, while in IE6, 40px will still be used, because IE6 does not support it! Important specification, we can meet the design needs of IE6 according to this rule. When we find that IE6 has different display effects from other browsers, we can set two, and add the above one! Important tag, and the following sentence does not need to be added, so IE6 will be executed as follows.
======================Gorgeous dividing line======================
About CSS for Individual Browser compatible It has become a commonplace problem. Tutorials on the Internet are everywhere. The following content is not too new. It is purely a personal summary. I hope it can help beginners to some extent
1、 CSS HACK
HACK concept:
Different browsers, such as Internet Explorer 6, Internet Explorer 7, Mozilla Firefox, etc., have different understanding of CSS parsing, which will lead to different page effects and will not get the page effects we need. At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and can get the page effect we want in different browsers. This process of writing different CSS codes for different browsers is called CSS hack,
HACK rule:
IE can recognize *; The standard browser (such as FF) does not recognize *;
IE6 can recognize *, but not! important,
IE7 can recognize *, and can also recognize! important;
FF can't recognize *, but it can! important;
IE6 IE7 FF
* √ √ ×
! important × √ √
Browser priority: FF<IE7<IE6, CSS hack writing order is generally FF IE7 IE6
Example:
Take: "# demo {width: 100px;}" as an example;
#demo {width:100px;}
* html #demo {width:120px;}
*+html #demo {width:130px;}
---------------
So finally, the width of # demo is interpreted as follows in the three browsers:
FIREFOX:100px;
ie6:120px;
ie7:130px; with
The next two methods can solve almost all HACKs today
1, ! important
With IE7 on! Important support! The important method is only applicable to the HACK of IE6 (Pay attention to the writing method. Remember that the position of the statement needs to be advanced.)
<style>
#wrapper
{
width: 100px! important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2. IE6/IE77 vs. FireFox
*+HTML and * html are IE specific tags. Firefox does not support them yet. *+html is IE7 specific tags
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+Html # wrapper {width: 60px;}/* ie7 fixed, pay attention to the order*/
}
</style>
be careful:
*+The HTML HACK for IE7 must ensure that the following statement is on the top of the HTML:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd ">
2、 Universal float closure
For the principle of clear flow, see [How To Clear Flows Without Structural Markup]
Add the following code to Global CSS and add class="clearfix" to the div to be closed
<style>
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
3、 Other compatible tips
one
The ul tag has a padding value by default in Mozilla, while in IE only the margin has a value. So defining ul {margin: 0; padding: 0;} first can solve most problems. Also available! Important solution
2. Centering problem
1) . Center vertically. Set the line height to the same height as the current div, and then use vertical align: middle (Note that the content should not break.)
2) . Center horizontally margin: 0 auto; (Of course not omnipotent)
You can place any item in the body of the html in the middle, and the item will automatically get equal left and right boundary values to ensure the center display. However, this is still a problem in browsers before IE6 and will not be centered, so it must be modified as follows:
body {
text-align: center;
}
#content {
text-align: left;
width: 700px;
margin: 0 auto;
}
Setting the body will cause the body content to be centered, but even all the text will be centered, which may not be the effect you want. For this reason, the div of # content also needs to specify a value: text align: left
3. The interpretation of IE5 and IE6's BOX is inconsistent
In IE5, div {width: 300px; margin: 0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right fill) - 10px (left fill). The final width of the div is 280px,
On IE6 and other browsers, the width is calculated as 300px+10px (right fill)+10px (left fill)=320px.
At this time, we can make the following modifications to div {width: 300px! Important; width: 340px; margin: 0 10px 0 10px}
I don't know what this is. I only know that IE5 and Firefox support it, but IE6 doesn't. If anyone understands, please let me know. Thanks!:)
4. Prior declaration of FORM label and ul label
In IE, these two tags will automatically margin some margins, while in FF, the margin is 0. Therefore, if you want to display them consistently, you'd better specify margin and padding in css. For the above two problems, my css generally first uses such a style ul, form {margin: 0; padding: 0;}, which is defined to be dead, so I won't worry about this later
five
Cursor: pointer can display cursor fingers in IE FF at the same time, and hand can only be displayed in IE FF
six
If the text is too long, the too long part will become an ellipsis. The display is IE5, FF is invalid, but can be hidden. IE6 is valid<DIV STYLE=“ width：120px； height：50px； border：1px solid blue； overflow：hidden； text-overflow：ellipsis”> < NOBR>For example, there is a long line of text that cannot be displayed in the table. Phontol.com</NOBR>
Fixed width Chinese character truncation: overflow: hidden; text-overflow：ellipsis； white-space：nowrap； (However, it can only process the truncation of text on one line, and cannot process multiple lines.) (IE5 and above) FF cannot, it only hides.
seven
IE does not recognize the definition of min, but in fact it regards the normal width and height as the case with min. This is a big problem. If only width and height are used, these two values will not change in normal browsers. If only min width and min height are used, the width and height are not set in IE.
For example, to set the background image, this width is important. To solve this problem, we can:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
8. Double distance generated by floating ie
#Box {float: left; width: 100px; margin: 0 0 0 100px;//In this case, IE will generate a distance of 200px display: inline;//Let the float be ignored}
Let's talk about the block and inline elements in detail. The feature of the block element is that it always starts on a new line, and the height, width, line height, and margin can be controlled (block element); The feature of the inline element is that it is on the same line as other elements and cannot be controlled (embedded elements);
#Box {display: block;//The embedded elements can be simulated as block elements display: inline;//The effect of arranging the same line is displayed: table;
10. Why the text under FF cannot open the height of the container
The container with a fixed height value in the standard browser will not be opened as in IE6. How do I set it if I want to fix the height and open it? The method is to remove the height setting min - height: 200px; In order to take care of IE6 that does not know min height, we can define it as follows:
{
height:auto! important;
height:200px;
min-height:200px;
}
11. Clear float
. hbox {display: table;//Display objects as block element level tables} or. hbox {clear: both;}
Or add: after (pseudo object) to set the content that occurs after the object. It is usually used together with content. IE does not support this pseudo object, which is not supported by IE browser,
Therefore, IE/WIN browsers are not affected. This is the most troublesome# box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8. A bug of 3 pixels generated by DIV floating IE text
The left object floats, and the right object is located by the left margin of the external patch. The text in the right object will be 3px away from the left
#Box {float: left; width: 800px;} # left {float: left; width: 50%;} # right {width: 50%;} * html # left {margin right: - 3px;//This sentence is the key}
HTML code<div id="box"><div id="left"></div><div id="right"></div></div>
9 Attribute selector (this is not compatible, but a bug hiding css)
p[id]{}div[id]{}
This is hidden for IE6.0 and versions below IE6.0. FF and Opera function
There are still differences between attribute selectors and sub selectors. The range of sub selectors is narrowed formally. The range of attribute selectors is relatively large. For example, in p [id], all p tags with id are of the same style
10 IE Hide and seek
When the application of DIV is complex, there are some links in each column. The problem of hide and seek is easy to occur when DIV is used.
Some content cannot be displayed. When you select this area with the mouse, you will find that the content is indeed on the page.
Solution: Use the line height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.
11 Height maladjustment
Height maladjustment means that when the height of the inner layer object changes, the outer layer height cannot be automatically adjusted, especially when the inner layer object uses
Margin or padding.
Example:
<div id="box">
<p>PContent in the object</p>
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
Solution: Add 2 empty div object CSS codes above and below the P object:. 1 {height: 0px; overflow: hidden;} or add border attribute to the DIV.
/*CSS compatibility of IE and Firefox*/
1. DOCTYPE affects CSS processing
2. FF: div is set to margin left. When the margin right is auto, it is already in the middle, and IE is not allowed
3. When FF: body sets text align, div must set margin: auto (mainly margin left, margin right) to center
4. FF: After setting padding, div will increase height and width, but IE will not, so you need to use! Important has one more height and width
5. FF: Yes! Important, ignored by IE, available! Important specially sets the style for FF
6. Vertical centering of div: vertical align: middle; Increase the line spacing to the same height as the whole DIV line height: 200px; Then insert the text and center it vertically. The disadvantage is to control the content and not break lines
7. cursor: pointer can display cursor fingers in IE FF at the same time, and hand can only be displayed in IE FF
8. FF: Add border and background color to the link. You need to set display: block and float: left to ensure no line breaks. Referring to menubar, the height of a and menubar is set to avoid dislocation of bottom edge display. If height is not set, a space can be inserted in menubar.
9. The difference of 2px caused by the inconsistent interpretation of the BOX model in mozilla firefox and IE Solution:
div{margin:30px!important;margin:28px;}
Note that the order of the two margins must not be reversed, according to Ah Jie! The attribute "important" is not recognized by IE, but can be recognized by other browsers. So in IE, it is actually explained as follows:
div{maring:30px;margin:28px}
If the definition is repeated, it will be executed according to the last one, so you can't just write margin: XXpx! important;
10. Inconsistent interpretation of IE5 and IE6
IE5 lower
div{width:300px;margin:0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right fill) - 10px (left fill). The final width of the div is 280px. On IE6 and other browsers, the width is calculated as 300px+10px (right fill)+10px (left fill)=320px. At this time, we can make the following modifications
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
I don't know what this/* */is, except that IE5 and Firefox support it but IE6 does not. If anyone understands, please let me know. Thank you!:)
11. The ul tag has a padding value by default in Mozilla, while in IE only the margin has a value, so define it first
ul{margin:0;padding:0;}
Can solve most problems
matters needing attention:
1. The div of the float must be closed.
For example: (where the attribute of floatA and floatB has been set to float: left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
Here, the NOTfloatC does not want to continue to shift, but to row down.
This code has no problem in IE. The problem is FF. The reason is that NOTfloatC is not a float tag, and the float tag must be closed.
stay
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
Add between
<#div class="clear"></#div>
This div must be declared in the most appropriate place. It must be at the same level with two divs with float attribute, and there must be no nesting relationship between them. Otherwise, an exception will be generated.
The clear style is defined as follows:
.clear{
clear:both;}
In addition, in order to make the height automatically adapt, overflow: hidden should be added to the wrapper;
When the box contains a float, the height of automatic adaptation is invalid under IE. At this time, the layout private property of IE should be triggered (heinous IE!). Use zoom: 1; It can be done, so that compatibility is achieved.
For example, a wrapper is defined as follows:
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2. Double margin.
For divs set to float, the margin set under ie will be doubled. This is a bug that exists in ie6.
The solution is to add display: inline;
For example:
<#div id="imfloat"></#div>
The corresponding css is
#IamFloat{
float:left;
margin:5px;/* 10px in IE*/
display:inline;/* In IE, it can be understood as 5px */}
3. On the Inclusion Relation of Containers
In many cases, especially when there is a parallel layout in the container, such as two or three float divs, the width is prone to problems. In IE, the width of the outer layer will be squeezed by the wider div of the inner layer. Be sure to use Photoshop Or Firework measures pixel level precision.
4. About height
If the content is added dynamically, the height should not be defined. The browser can automatically scale, but if it is static content, it is better to set the height. (It seems that sometimes it doesn't automatically open down, and I don't know what's going on.)
5. The most ruthless means -! important;
If there is really no way to solve some detailed problems, we can use this method FF will automatically prioritize the resolution of "! Important", while IE will ignore it. See below
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px ! important; /* Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
