CSS several compatibility issues

1.bug_firefox!!! A sub-container within a container if you want to float left and right, you need to set the style on this container: "Overflow:hidden".

Note: Internal element floats will cause the height of the outer container to not be adaptive to the height of the inner element in Firefox, so we first

To add "Overflow:hidden;" in the CSS code of the parent container.

2.ie6 the bilateral distance problem!!

Cause: When a child container (block-level element) in the parent container has a floating style, add the Margin-left and margin-right styles to the elements, and double margins appear under IE6.

Workaround 1: Add a style to the current element so that the current element is not a block, such as: Display:inline;display:list-item so that when the element floats, there is no problem of double margins under IE6.

Workaround 2:

Flaot floating causes IE6 under double margin problem, this most common, also best handle,!important solve, for example
margin-left:10px!important;/*ie7,ie8,ff under is 10px*/;
The Margin-left:5px;/*ie6 property is written in 5PX, but the 10p is displayed.

3.IE8 compatibility issues, this best deal, converted into IE7 compatible can be. Add the following piece of code to the head, and then as long as it is compatible under IE7, IE8 below is also compatible. <meta http-equiv= "x-ua-compatible" content= "ie=7"/>

4. Clear block display, this can solve the floating caused by the block, after the block, when the div background fill or fill in the picture, there will be a background break or a small difference. This compatibility appears not too much, I do now, only encountered two times, the method is in the presence of a compatible div css to write a display:block, or other properties, Chinese what meaning I do not know, my English is poor, but can achieve the desired effect, 6e "z+e%|8g#|

5. A lot of friends div+css, will appear, in IE several browsers are good, but in FF problem, with!important will IE7 do incompatible, very headache, in thinking, there is no way to do only under the FF, I used this method, I feel that the trial is bad, is to precede the attribute with a symbol such as: *, &,￥,#,@,-,+, the attribute is only IE browser is recognized, and FF is not recognized, the method is as follows (note the order of signed attributes and unsigned attributes)
HEIGHT:100PX;/*FF Display 100 High */
+height:120px;/*ie678 Display 120 High */

6. Sometimes, in the layout of the time, found that there is a div floating, the next div is to be shown below, the results ran above, the situation is generally below the FF will appear, the solution is to clear the floating, in the set of the div under the float plus a Div, CSS surface write a clear:both, as follows
1.<divstyledivstyle= "float:left;height:100px;width:500px;" >
2.<divstyledivstyle= "Clear:both;" >
3.<divstyledivstyle= "height:100px;width=300px" >

7. Then the center problem, this problem in the novice body a lot, the main reason is that the box model is not understanding, did not memorize the box model, if found that your page is not in the Bureau, I now know, there are several reasons:
1. One is no box, that is, a large div after the body of all the div to put up the one, you did not write.
2. You wrote it, but the width is useless. Absolute width: But with a relative width, want the bureau, must use absolute width.

8. Extension: If I want to design at the time, achieve ie6,ie7,ff under three different effects, such as IE6 under the background red, IE7 under the blue FF Green, here, I have tried, can, with a compatible method (note the order, you can understand it well).
Red in the BACKGROUND:RED;/*FF * *
+background:blue!important;/*ie7 shown below Blue */
+background:green;/*ie6 shown below is green */

*********************************************************************************

*********************************************************************************

9.IE6 IE7 IE8 FF browser CSS compatibility issues
IE6, IE7, IE8, FF browser CSS compatibility issues, originally IE6 and FF compatibility is very easy to solve. Add a IE7 will trouble point, the appearance of IE8 more headaches, the original HackIE7 method can not be used, how to do?
Fortunately, Microsoft has provided such a code:
<metahttp-equivmetahttp-equiv= "x-ua-compatible" content= "ie=7"/>
Put this piece of code into 1.background: #ffc;/* valid for Firefox */
2.*background: #ccc;/* Valid for IE7 */
3._background: #000,/* Only valid for IE6 */
Explain it:
Firefox can parse the first paragraph, the back of the two because the front with a special symbol "*" and "_", Firefox does not recognize, so only recognize background: #ffc, see is yellow;
IE7 before two short can recognize, with the final, so the final resolution is background: #ccc, see is gray;
IE6 Three can be recognized, and "_" This only IE6 can recognize, so the final resolution is _background: #000, see is black
is already the simplest and best understanding of the wording, if you are Google come in, I can be very responsible to tell you, this method is OK, I tested.
IE8 that part of the code compatible with 7 I have also tested, in my current Windos7 beta version of the IE8 is no problem, and later IE8 official version out of the tube no matter what you do not know.
PS: If you find that you have a problem with my writing, please check your HTML header to see if the contents of <! Doctypehtmlpublic "-//w3c//dtdxhtml1.0transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
This is now a comparative specification of the wording, if you are using Dreamweaver to do the page, the default is this specification, remember, non-standard wording, compatibility cannot be guaranteed.

10. Solve IE6, IE7, Firefox compatible with the simplest csshack

#someNode
{
position:fixed;
#position: fixed;
_position:fixed;
}
The first row for Firefox and other browsers to see
The second row to IE7 (probably later IE8, IE9 also so, who knows)
Third row for IE6 and older versions look
The best application is to let IE6 also "support" position:fixed, and, in line with this principle, can not introduce JavaScript code (only with the IE6 expression), I have a ready-made page, CSS is written as follows:

#ff-R
{
position:fixed;
_position:absolute;
right:15px;
top:15px;
_top:expression (eval (document.compatmode&&
document.compatmode== ' Css1compat ')?
DOCUMENTELEMENT.SCROLLTOP+15:
document.body.scrolltop+
(Document.body.clientHeight
-this.clientheight));
}

CSS Code
<style type= "Text/css" >
#body {
border:2px solid #00f; Properties of the/*FF */
border:2px solid #090 \9; /* Properties of IE6/7/8 */
border:2px solid #F90; /* IE8 Support */
_border:2px solid #f00; Properties of the/*IE6 */
}
</style>

HTML code
<div id= "Body" >
<ul>
<LI>FF Blue Edge </li>
<LI>IE6 Red Edge </li>
<li>ie7 Green Edge </li>
<LI>IE8 Yellow Edge </li>
</ul>
</div>
Note: The CSS order can not be wrong, because FF does not know \9,\0,_ writing, so for the blue edge, \9 is the ie6,7,8 property, the following code does not rewrite the IE7 code, so IE7 green edge; In the same vein, the IE8 property is equivalent to rewriting the color, so IE8 is the yellow edge, _ is the IE6 attribute, overriding the color as a red edge.

11.div Dislocation/Resolve IE6, IE7, IE8 incompatible issues
"The problem of div dislocation in IE6"
The use of "Float:left" div in IE8, IE7, there is no problem, IE6 down, there is a blank. This is because the kernel used by the IE6 by default adds the distance between the div to three px, so try to add "margin-left:-5px" to the style of the lower Div. or smaller.

Not finished, referenced from: http://www.douban.com/note/163291324/

CSS several compatibility issues