A browser-compatible problem is often encountered when writing CSS stylesheets. Like the different kernel browser display is not necessarily the same, different versions of the browser will also produce up and down compatibility problem, how to solve these problems become our trouble, if you are familiar with CSS hack technology, That's just too easy, but for those who don't, it's really what they're upset about. Here's an article from VP's official blog that introduces the techniques of compatible browsers. But you also do not think that as long as the browser to show errors in the browser problem, it is likely that your structure is not good, I suggest you to study the semantic structure, after all, building a house to build the bar first.
1, different interpretations of the box interpreter.
Copy Code code 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 the html>body #box {}
3, only IE identify *html #box {}
4, in Ie/win effective and Ie/max hidden, using the backslash/* * *
#box {}
5, to give IE a separate definition of the style here more detailed description
6, floating IE produced double distance #box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);
#box {display:block//can simulate an inline element as a block element display:inline//effect diplay:table the same row arrangement;//for FF, simulate table effect}
7,for Oprea only @media all and (min-width:0px) {/* Opera */#box {}}
8,ie with the width and height of the problem
IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height.
For example, to set the background picture, 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;}
9, the minimum width of the page
Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually treats the width as a minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the DIV:
And then CSS design: #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 through JavaScript's judgment.
The same approach can also achieve maximum width for 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 table at the block element level} or. hackbox{Clear:both;
or add: After (Pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser. -------the most troublesome ...
#box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}
11,div floating IE text produces 3 pixel bugs
The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing. #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 property selector (this is not compatible, is a bug that hides CSS) p[id]{}div[id]{}
This is hidden from the IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, and the scope of the child selector shrinks from the form, and the property selector is larger in scope, as in P[id], and all of the P tags have the same type of ID.
