These methods are usually used when I find a collection on the Internet, OH, I declare in advance to avoid misunderstanding!
First, CSS HACK
The following two methods can solve almost all hack today.
1,!important
With the support of IE7 to!important, the!important method is now targeted only at IE6 hack. (Note the wording. Remember that the claim position needs to be advanced.)
<style>
#wrapper
{
Width:100px!important; * IE7+FF * *
width:80px; * IE6 * *
}
</style>
2, Ie6/ie77 to Firefox
*+html and *html is the unique label of IE, Firefox is not supported. And *+html is IE7 unique label.
<style>
#wrapper
{
#wrapper {width:120px}/* FireFox/*
*html #wrapper {width:80px}////* IE6 fixed */
*+html #wrapper {width:60px}//* IE7 fixed, note order * *
}
</style>
Attention:
*+html to IE7 hack must ensure that the top of the HTML has the following declaration:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
Second, universal float closure
The principle of clear float can be found in [how to clear floats without structural Markup]
Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.
<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>
Third, other compatibility skills
1, under the FF to the DIV set padding will cause the width and height increase, but IE will not. (Available!important solution)
2, center problem.
1). vertically centered. Set the line-height to the same height as the current Div, and then pass the Vertical-align:middle. (Note that the content is not wrapped.)
2). Horizontally centered. margin:0 Auto; (certainly not omnipotent)
3, if you need to add a style to the contents of a label, you need to set display:block (common to navigation tags)
4, FF and IE on the BOX understanding of the difference between the 2px is also set for float div in IE under the margin doubling and so on.
5, the UL label below the FF default has List-style and padding. It is best to make a statement beforehand to avoid unnecessary trouble. (Common in navigation labels and content lists)
6, as an external wrapper div do not set dead height, preferably plus overflow:hidden. To achieve a high degree of adaptability.
7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE.
1 CSS styles for Firefox IE6 IE7
Now most of them are using!important to hack, and for IE6 and Firefox tests to be displayed properly,
But IE7 to!important can correctly explain, will cause the page does not appear according to the request! Find a needle
To IE7 good hack way is to use "*+html", now with IE7 browsing, should have no problem.
Now write a CSS can do this:
#1 {color: #333;}/* Moz/*
* HTML #1 {color: #666}/* IE6 * *
*+html #1 {color: #999;}/* IE7 * *
Then in Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.
2 centering problems in CSS layouts
The main style definitions are as follows:
body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }
Description
First, the parent element defines text-align:center, which means that the content within the parent element is centered, and for IE this setting is OK.
But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”
To be sure, if you want to use this method to make the entire page centered, it is recommended not to be nested in a div, you can split the multiple div in turn,
Just define Margin-right:auto in each div that is pulled out; Margin-left:auto; It's OK.
3 box models different interpretations
#box {width:600px;//for ie6.0-w\idth:500px;//for ff+ie6.0}
#box {width:600px!important//for ff width:600px;//for ff+ie6.0 width/**/:500px;//for ie6.0-}
4 double distance generated by the floating IE
#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);
#box {display:block//can simulate an inline element as a block element display:inline//effect diplay:table the same row arrangement;
IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This is a big problem, if you only use width and height,
In the normal browser, these two values will not change, if only with Min-width and min-height, ie below is not set width and height.
For example, to set the background picture, this width is more important. To solve this problem, you can do this:
#box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}
6 minimum width of the page
Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE doesn't recognize this,
And it actually turns the width to the minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the DIV:
Then CSS is designed like this:
#container {min-width:600px width:expression (Document.body.clientWidth < 600?) "600px": "Auto");
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.
Can also be written directly:
#container {min-width:600px; *width:600px;}
This achieves the minimum width of 600PX for both IE and FF.
7 Clear Floating
. hackbox{display:table;//Display the object as a table at the block element level} or. hackbox{Clear:both;
or add: After (Pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support,
So it doesn't affect the Ie/win browser. This is the most troublesome ... #box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}
8 Div Floating IE text produces 3 pixel bugs
The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.
#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 Property Selector (This is not compatible, is a hidden CSS bug)
p[id]{}div[id]{}
This is hidden from the IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, and the scope of the child selector shrinks from the form, and the property selector is larger in scope, as in P[id], and all of the P tags have the same type of ID.
The question of IE hide-and-seek
When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.
Some content does not show up when the mouse selects this area is found to be true on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
11 Height Not suitable
Height is not adaptable when the height of the inner object changes when the outer height can not be automatically adjusted, especially when the inner object is used
When margin or paddign.
Cases:
<div id= "box" >
Content in the <p>p object </p>
</div>
CSS: #box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
Workaround: Add 2 empty div object CSS code to and from the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.
The following approach is an approach that is analyzed from another angle:
Browser bug handling method collation (section), for friends who like web design to share:
1. Asterisk *
IE can recognize *, standard browsers such as FF do not recognize *.
Example: p {color:yellow; *color:red;}
Similar to having
+ Plus
Only IE explained
p{color:red; +color:blue}
IE shows Blue FF showing red
2.!important
IE6 and the following will ignore the style, IE7 FF will support;
P{color:red!important;color:yellow;}
IE7 FF Displays the red IE6 yellow
Note here that the!important method is only after the above format is IE6 and the following ignored, in addition to improve the style weight method can be universal.
3. Underline.
IE6 and the following versions will use the style, and others will ignore
p{color:red; _color:blue}
4. Note:
p {color:red};
This style can be applied to display in IE6, while IE5 and the following version are not processed, so you can make a difference for IE5/6
5, @IMPORT:
Using URLs in @import to import styles, the standard use is to enclose the value in the URL with quotes, following the @import URL ("Newstyle.css"), which can be supported by more than IE5 browsers and FF, thus enabling the IE4 style to be handled separately.
In addition, there is another way:
@IMPORT URL ("noie.css") screen;
Screen is the option to specify the type of device, screens are used for on-screen display, print is used for printing device display but IE is not supported for this method, all IE browsers can make the difference between IE and ff.
6. Property selector: Used to select objects with specific properties
Span[class=left]{color:blue}
span[title]{color:red;}
IE6 is not supported, but it works in FF, so IE and FF can be handled separately.
In actual development, IE and FF are often processed separately, you can use the following code:
#content {
color:red;
}
[Xmlnx] #content {
Color:blue
}
This method I feel very practical, also often used, recommend friends to use, if you need more detailed instructions, I can post.
7. Child Object selector:
Span>p{color:red}
IE6 is also not supported and can be used to distinguish between IE and FF
8, Tantek method
#content {
Color:blue;
voice-family: "}\" ";
Voice-family:inherit;
color:red;
}
The above code, after using Voice-family, will not be parsed by IE5.5 and the following browsers. Therefore, the text color will be red on ie6/7/ff, and blue will be rendered on IE5.5 and the following browsers;
In addition, Voice-family also has a way of handling:
#content {
color:red;
voice-family: "}"
Voice-family:inherit;
Color:blue;
}
Using this method, the text of the IE6 and the following versions of the browser and the FF browser will be rendered red, while the IE5 and the following versions of the browser are rendered blue!
9, Escape attributes
p{w\idth:200px;}
IE5.5 below will be ignored. Note: Backslash characters cannot appear in front of 0-9 or letter A-f
10, ie in the conditional annotation
Introduction to Conditional annotations
The conditional annotation (Conditional comments) in IE has excellent distinguishing ability between IE version and IE non ie, which is commonly used in web design.
Hack method.
Conditional annotations can only be used for IE5 or above.
If you have more than one IE installed, the conditional annotation will be standard with the highest version of IE.
The basic structure of a conditional annotation is the same as that of an HTML annotation (<!––>). So browsers outside of IE will look at them as ordinary
Comments and ignore them completely.
IE will be based on the if condition to determine whether the same as the parsing of ordinary page content to parse the contents of the conditional comment.
Second, the conditional annotation attribute
Gt:greater than, select the version above the conditional version, not including the conditional version
Lt:less than, select the following version of the conditional version, not including the conditional version
Gte:greater than or equal, select the version above the conditional version, including the conditional version
Lte:less than or equal, select the following version of the conditional version, including the conditional version
! : Select all versions except the conditional version, regardless of height
Third, the use of conditional annotation method
Note that the <> in the code is changed to the corresponding greater or lesser number in English
<!--[if IE 5]> only IE5.5 visible <! [endif]-->
<!--[if GT ie 5.5]> only IE 5.5 visible <! [endif]-->
<!--[if it ie 5.5]> only below IE 5.5 visible <! [endif]-->
<!--[if GTE IE 5.5]>ie 5.5 and above visible <! [endif]-->
<!--[if ITE IE 5.5]>ie 5.5 and below visible <! [endif]--><!--[if! ie 5.5]> is not IE 5.5 ie visible <! [EndIf]
-->
The following code is a conditional comment that runs in non-IE browsers
<!--[if! ie]><!--> You are not using the Internet explorer<!--<! [endif]-->
<!--[if IE 6]><!--> You are using Internet Explorer version 6 or a non-IE browser <!--<! [endif]-
The following is a summary of the three comprehensive solutions:
First type:
. div {
Backgroundrange;
*background:green!important;
*background:blue;
}
The second type:
. div {
margin:10px;
*margin:15px;
_margin:15px;
}
The third type:
#div {color: #333;}
* HTML #div {color: #666;}
*+html #div {color: #999;}
