1. CSS HACK
The following two methods can solve almost all HACKs today.
1. !important
With IE7’s support for !important, the !important method is now only for IE6’s HACK. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)
<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>
2. IE6/IE77 for FireFox
*+html and *html are IE-specific tags, which are not supported by firefox yet. And *+html It is a unique tag for IE7.
<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>
Note:
*+html HACK for IE7 must ensure that there is the following statement at the top of the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
2. Universal float closure.
For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup].
Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time.
<style >
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}
</style>
3. Other compatibility tips
1. Setting padding on div under FF will cause width and height to increase, but IE will not. (can be solved with !important)
2. Centering problem.
1). Center vertically. Center line- The height is set to the same height as the current div, and then vertical-align: middle. (Be careful not to wrap the content.)
2). Center it horizontally. margin: 0 auto; (of course it is not omnipotent)
3. If you need to add content in the a tag For the upper style, you need to set display: block; (common in navigation tags)
4. The difference in understanding of BOX between FF and IE leads to a 2px difference and problems such as the margin of a div set to float doubling under IE.
5. The ul tag is in FF There are list-style and padding by default below. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)
6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden .To achieve a high degree of adaptability.
7. About the hand cursor. cursor: pointer. And hand is only applicable to IE.
1. Most of the css styles for firefox ie6 and ie7
are now hacked with !important. For ie6 and firefox tests, it can be normal. Display,
but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack
for
IE7 using "*+html". Now browse it with IE7 and there should be no problem.Now write a CSS like this:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
Then the font color is displayed as #333 in firefox. The font color is #666 under IE6 and #999 under IE7.
2The main style definition for
centering issues in css layout
is as follows:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
Description:
First define TEXT-ALIGN on the parent element: center; This means that the content within the parent element is centered; this setting is sufficient for IE.
But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when setting the child element.
It should be noted that if you want to use this method to center the entire page, it is recommended not to set it in a In a DIV, you can split out multiple divs in sequence,
just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.
3 Different interpretations of the box model
#box{ width:600px; //for ie6.0- width: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 floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //This kind Under the circumstances, IE will generate a distance of 200px display:inline; //Ignore the float} Let’s
talk about the two elements block and inline in detail. The characteristics of the Block element are: always start on a new line, height, width, line height , the margins can be controlled (block elements); the characteristics of Inline elements are: on the same line as other elements,... cannot be controlled (inline elements);
#box{ display:block; //can be inline elements Simulate as a block element display:inline; //Achieve the effect of arranging in the same row diplay:table;
IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height,
these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.
For example, if you want to set a background image, 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 pages Minimum width
min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be less than a certain width, so as to ensure that the layout is always correct. But IE doesn't recognize this,
and it actually treats width as the minimum width. In order to make this command work on IE, you can put a <div> under the <body> tag, and then specify a class for the div:
Then design the CSS like this:
#container{ min-width: 600px; width:expression (document.body.clientWidth < 600? "600px": "auto" );}
The first min-width is normal; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make you The HTML document is not very formal. It actually implements the minimum width through Javascript judgment.
It can also be written directly as:
#container{ min-width:600px; *width:600px;}
In this way, the minimum width is 600PX regardless of IE or FF.
7 Clear the floating
.hackbox{ display:table; //Display the object as a block element-level table} or .hackbox{ clear:both;}
or add: after ( Pseudo object), sets the content that occurs after the object, usually used in conjunction with content. IE does not support this pseudo object and is not supported by Ie browsers,
so it does not affect IE/WIN browsers. The most troublesome thing about this... #box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV floating IE text produces 3 pixels
The object on the left side ofthe bug
is floating, and the right side is positioned using the left margin of the outer patch. The text in the right object will be 3px away from the left side.
#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 cannot be considered compatible, it is a bug in hiding css)
p[id]{}div[id]{}
This is for IE6.0 and versions below IE6.0 are hidden.
There is still a difference between attribute selectors and sub-selectors in FF and OPera. The scope of sub-selectors is narrowed in form, while the scope of attribute selectors is relatively large, such as p In [id], all p tags with ids are of the same style.
10 IE hide-and-seek problem
When the div application is complex, there are some links in each column, such as DIV. At this time, the hide-and-seek problem easily occurs.
Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.
Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.
11 Height non-adaptation
Height non-adaptation means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses
margin or paddign.
Example:
<div id="box">
<p>Content in p object</p>
</div>
CSS: #box {background-color:#eee; }
#box p {margin-top: 20px;margin -bottom: 20px; text-align:center; }
Solution: Add 2 empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.
The following method is an analysis method from another angle:
Browser BUG handling methods compiled (part) for friends who like web design to share:
1. Asterisk*
IE can recognize *, but standard browsers such as FF cannot recognize *.
Example: p { color:yellow; *color:red;}
Similar ones are
+ plus sign
Only IE explains
p{color:red; +color:blue}
IE displays blue and FF displays red
2.!important
IE6 and below will ignore this style, IE7 FF will support it;
p{color:red !important;color:yellow;}
IE7 FF will show red IE6 yellow
Note here that the !important method is only ignored by IE6 and below after following the above format. Other methods of increasing style weight can be used universally.
3. Underline.
IE6 and below versions will use this style, others will be ignored.
p{color:red; _color:blue}
4. Notes:
p{color:red};
This style can be applied and displayed in IE6, but will not be processed in IE5 and below versions, so it can be distinguished for IE5/6
5. @IMPORT:
Use URL in @IMPORT to import styles. The standard usage is to put the value in the URL in quotes, as follows @IMPORT URL("newstyle.css"); this usage can be supported by browsers IE5 and above and FF, thus achieving The styles of IE4 are processed separately.
In addition, there is another method:
@IMPORT URL("noie.css") screen;
Screen is an option used to specify the device type, screen is used for screen display, and print is used for printing device display. However, IE does not support this method, and all IE browsers can distinguish between IE and FF.
6. Attribute selector: used to select objects with specific attributes
span[class=left]{color:blue}
span[title]{color:red;}
IE6 does not support it, but it works fine in FF, so IE and FF can be processed separately.
In actual development, IE and FF often need to be processed separately. You can use the following code:
#content{
color:red;
}
[xmlnx] #content{
color:blue
}
I think this method is very practical and is used frequently. I recommend it to friends. If you need more detailed explanation, I can post it again.
7. Sub-object selector:
span>p{color:red}
IE6 is also not supported, and can also be used to distinguish IE and FF.
8. Tantek method
#content{
color:blue;
voice-family:""}"";
voice-family:inherit;
color:red;
}
After using voice-family in the above code, the following color:red will not be parsed by browsers IE5.5 and below. Therefore, the text color will appear red on IE6/7/FF, and on IE5.5 and below It will appear blue on the browser;
In addition, there is another way to deal with voice-family:
#content{
color:red;
voice-family:"}"
voice-family:inherit;
color:blue;
}
Using this method, the text in IE6 and below browsers and FF browser will appear red, while the text in IE5 and below browsers will appear blue!
9. Escape attributes
p{width:200px;}
IE5.5 and below will be ignored. Note: The backslash character cannot appear before 0-9 or the letter af
10. Conditional comments in IE 1. Introduction to conditional comments
Conditional comments in IE have excellent ability to distinguish IE versions from IE and non-IE, and are commonly used in WEB design.
hack method.
Conditional comments can only be used in IE5 and above.
If you have multiple IEs installed, the conditional comments will be based on the highest version of IE.
The basic structure of conditional comments is the same as HTML comments (<!– –>). Therefore browsers other than IE will treat them as ordinary comments and ignore them completely.
IE will use the if condition to determine whether to parse the content in the conditional comment like normal page content.
2. Conditional annotation attributes
gt: greater than, select the conditional version or above, excluding the conditional version
lt: less than, select the version below the conditional version, excluding the conditional version
gte: greater than or equal, select the conditional version or above, including the conditional version
lte: less than or equal, select the version below the conditional version, including the conditional version
! : Select all versions except the conditional version, regardless of high or low, how to use conditional comments
Pay attention to replace the <> in the code with the corresponding greater than or less than sign in English.
<!--[if IE 5]>Only visible in IE5.5<![endif]-->
<!--[if gt IE 5.5]>Only visible in IE 5.5 and above<![endif]-->
<!--[if it IE 5.5]>Only visible under IE 5.5<![endif]-->
<!--[if gte IE 5.5]>Visible for IE 5.5 and above<![endif]-->
<!--[if ite IE 5.5]>Visible to IE 5.5 and below<![endif]--><!--[if !IE 5.5]>Visible to non-IE 5.5 IE<![endif]
-->
The following code is a conditional comment that runs under non-IE browsers
<!--[if !IE]><!-->You are not using Internet Explorer<!--<![endif]-->
<!--[if IE 6]><!-->You are using Internet Explorer version 6 or a non-IE browser<!--<![endif]-The
following are summarized three comprehensive solutions:
The first type:
.div {
backgroundrange;
*background:green !important;
*background:blue;
}
Second type:
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
Third type:
#div { color: #333; }
* html #div { color: #666; }
*+html #div { color: #999; }