1. Different explanations of the box interpreter.Copy codeThe Code is as follows: # 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 -}
2. Hide css in ie and use the sub-Selector html> body # box {}
3. Only ie recognizes * html # box {}
4. Valid in ie/win while hidden in ie/max. Use the backslash /*\*/
# Box {}
5. Define a style for ie. More details here
6. Double distance produced by floating ie # box {float: left; width: 100px; margin: 0 0 0 100px; // in this case, IE will generate a PX distance display: inline; // ignore float}
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 features of the Inline element are as follows: 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; // for ff, simulated table effect}
7, for oprea only @ media all and (min-width: 0px) {/* opera */# box {}}
8. Issues with 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: # box {width: 80px; height: 35px;} html> body # box {width: auto; height: auto; min-width: 80px; min-height: 35px ;}
9. 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: # 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 is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through Javascript judgment.
In the same way, you can implement the maximum width for IE: # container {min-width: 600px; max-width: 1200px; width: expression (document. body. clientWidth <600? & Quot; 600px & quot;: document. body. clientWidth & gt; 1200? "Pixel PX": "auto ";}
10, clear floating
. Hackbox {display: table; // display the object as a block element-Level table} 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 kind of most troublesome ......
# Box: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;}
11. DIV floating IE text generated a 3-pixel bug
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. # box {float: left; width: 800px; }# left {float: left; width: 50% ;}# right {width: 50% ;} * html # left {margin-right:-3px; // This sentence is critical}
HTML code <div id = "box"> <div id = "left"> </div> <div id = "right"> </div>
12. Attribute selector (this is incompatible and is a bug in hiding css) 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.
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
