The 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+ie 6.0 width/**/:500px; For ie6.0-}
2, hide css in IE, use child selector html>body #box {}
3, only IE recognizes *html #box {}
4, valid in Ie/win and Ie/max hidden, use backslash/* \ */
#box {}
5, define the style for IE individually here for more detailed instructions
6, the 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}
Here Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line,... Uncontrollable (inline element);
#box {display:block;//can simulate a block element display:inline for inline elements;//Implement the effect of the same row arrangement diplay:table;//for FF, simulates the effect of table}
7,for Oprea only @media all and (min-width:0px) {/* Opera */#box {}}
8,ie problems with width and height
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.
For example, to set the background image, this width is more 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, the minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. To make this command available on IE, put a <div> into the <body> tab and specify a class for the DIV:
Then the 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 by JavaScript's judgment.
The same approach can be achieved for IE maximum width: #container {min-width:600px;max-width:1200px;width:expression (Document.body.clientWidth < 600? "600px": document.body.clientWidth > 1200? "1200px": "Auto";}
10, clear floating
. hackbox{display:table;//Display the object as a block-element-level table} or. hackbox{Clear:both;}
or join: After (pseudo-object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-IE browser support, so does not affect the Ie/win browser. -------This is the most troublesome ...
#box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}
11,div floating IE text generates 3 pixels of bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 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>
12, the attribute selector (this is not considered compatible, is a bug to hide CSS) p[id]{}div[id]{}
This is hidden for IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, the range of the child selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.
The above is the CSS implementation of the various browser-compatible code _ Experience exchange of content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
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
