Tips for compatibility with individual browsers _css/html

1, different interpretations of the box interpreter.

#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 sub-selector

Html>body #box {}
3, only IE recognition

*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, double the 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 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 words, ie below is basically 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, you can put one on the tab and then 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 also be used to achieve the maximum width of IE:

#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
12, the attribute selector (this is not considered compatible, is a bug to hide the 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.

Cond...

trackback:http://tb.blog.csdn.net/trackback.aspx?postid=592516

