Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! If you find a good hack Method for IE7, you can use "* + html". Now you can use IE7 to browse it. It should be okay. Now you can write a CSS file like this:
Example source code
# ABC {color: #333;}/* Moz */
* Html # ABC {color: #666;}/* IE6 */
* + Html # ABC {color: #999;}/* IE7 */
The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.
Ii. center problem in CSS layout
The main style definition is as follows:
Example source code
Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note: first, define text-align: center in the parent element. This means that the content in the parent element is centered. You can set IE in this way.
However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence, you only need to define margin-Right: auto; margin-left: auto; in each split Div.
Iii. Box Model
Example source code
# Box {
;
// For ie6.0-w \ idth: 500px;
// For FF + ie6.0
}
# Box {
> // For FF
;
// For FF + ie6.0
Width/**/: 500px;
// For ie6.0-
}
Iv. Double distance produced by floating IE6
Example source code
# Box {float: Left; margin: 0 0 0 100px;
// In this case, ie will generate a PX distance display: inline; // ignore floating}
Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the characteristics of the inline element are: on the same line as other elements ,... Uncontrollable (embedded element );
# Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: Table;
V. Questions about IE and width and height
IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is important. To solve this problem, you can:
Example source code
# Box {; 80px; Height: 35px ;}
HTML & gt; body # box {; Auto; Height: auto; Min-width: 80px; Min-Height: 35px ;}
6. Minimum page width
Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:
Then CSS is designed like this:
Example source code
# Container {
Min-; 600px;
; Xpression (document. Body. clientwidth <600? "600px": "Auto ");
}
The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.
7. Clear floating
Example source code
. Hackbox {
Display: Table;
// Use the object as a table at the Block Element Level
Display
}
Or
. Hackbox {
Clear: both;
}
Or add: After (pseudo object) to set the content after the object, which is usually used with content. ie does not support this pseudo object, not supported by IE browsers, so it does not affect IE/win browsers. This is the most troublesome
Example source code
...... # Box: After {
Content: ".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
8. The bug that DIV floating ie text produces 3 pixels
The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left.
Example source code
# Box {
Float: left;
;}
# Left {
Float: left;
;}
# Right {
;
}
* Html # Left {
Margin-Right:-3px;
// This sentence is the key
}
HTML code
& Lt; Div id = Box>
<Div id = left> </div>
<Div id = right> </div>
</Div>
9. Attribute selector (this is incompatible and is a bug in hiding CSS)
Example source code
P [ID] {} Div [ID] {}
P [ID] {} Div [ID] {}
This is hidden for versions earlier than ie6.0 and ie6.0. It is used by ff and opera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style.
10. Questions about Internet Explorer
When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed 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.
