CSS compatibility and bug handling

Ashes level clear float

. clearfix:after {    content: ".";    Display:block;    height:0;    Clear:both;    Visibility:hidden;    Overflow:hidden;    *zoom:1; Compatible with IE}

There is a gap problem between inline element connections

Cause: Inline elements are handled as fonts, and there is an interval between the fonts

Workaround:

1. Multiple labels written on one line

2. The place where the label will be closed coincides with the place where the label was started

3. Use annotations to connect to the tail

4. Write on the parent: font-size:0;

5. Using Display:block (img is inline Element)

6. Using the Letter-spacing property

When block-level elements wrap inline elements, there are always a few pixel differences.

<!--example 1--><p></p><!--example 2--><ul><li></li></ul> <!--example 3--><p><span>asdasdasd</span></p>

Workaround: Set the inline element property: Display:block;

CSS Vertical Centering method

Be sure to give the element a wide height when used

width:200px;        height:200px;        Margin:auto;        Position:absolute;        top:0;        left:0;        bottom:0;        right:0;

CSS Hack

Refers to the CSS that is written for different browsers

There are three ways of hack

1.html hack (add different classes to differentiate)

<!--[If LT IE 7]>

2. Selector hack


* HTML. Test{color: #090;}/* for IE6 */* + HTML. Test{color: #ff0;}/* for IE7 */

3. Attribute hack


Color: #fff; /*: Select ie8+ and Opera*/color: #090 \9; /* For IE browser */*color: #f00; /* for IE7 */_color: #ff0; /* for IE6 */

ie6.7 does not support Box-sizing:border-box issues

Solution: Use Https://github.com/Schepp/box-sizing-polyfill This gasket, the stability of poor

Note: *behavior:url (.. /RESOURCE/JS/LAB/BOXSIZING.HTC); This URL is relative to the HTML page!!

UL in Li below the spacer line with Li layout border problem

In IE lower version of the bug, will be more than Li's wide

FIX: Spacers use Li's border to do

IE8 and the following browsers do not support: Befor.:after issues

Use Left:expression (eval (document.documentElement.scrollLeft)) with Top:expression (eval ( DOCUMENT.DOCUMENTELEMENT.SCROLLTOP))


. lefttop{    Position:absolute;    Left:expression (eval (document.documentElement.scrollLeft));    Top:expression (eval (Document.documentElement.scrollTop));}

Position:fixed flashing problem under low version browser

Solve:


*html{   Background-image:url (about:blank);   background-attachment:fixed;}

IE6 Double margin,padding margin problem

Once the inner elements are floating, there will be double bugs

Workaround: Add the Display:inline property to the inner element

A rectangular problem occurs when setting a wide high 10px in the IE6

Another case of this phenomenon is the definition of a relatively small height problem in IE6.

Cause: IE6 has a default row height

Solution: Use font-size:0;line-height:0;

IE6 unrecognized Pseudo-object: First-letter/:first-line problem

Similar to this solution:
P:first-letter {}

Add a space between First-letter and "{"

Ignoring!important problems under IE6

The following wording does not work under IE6


p{  color: #f00!important;  Color: #000;}

FIX: Change the wording


P{color: #f00!important;} P{color: #000;}

Margin-top problem between parent element and child element (BFC problem)

Behavior: When you set the Margin-top property to the first child element, the parent element is also moved down

code example:


<style type= "Text/css" >        . wrapper {      position:relative;      width:500px;      height:500px;      Background-color: #ddd;     }    . content{        background-color: #6699FF;        width:200px;        height:200px;    }     </style><p class= "wrapper" >        <p class= "content" ></p>    </p>

Solve:

1, modify the height of the parent element, add padding-top style simulation (padding-top:1px; common)

2. Add Overflow:hidden for parent element; style (perfect)

3. Declare floats for parent or child elements (float:left; available)

4. Add border for parent element (border:1px solid transparent available)

5. Absolute positioning for parent element or child element declaration

element float causes parent element collapse problem

See Example:


<p class= ' outer ' style= "Width:300px;background-color:gray" >                <p class= ' innner ' style= ' width:100px; Height:100px;background-color:blue;float:left; " ></p>    </p>

Workaround:

1. Add the Overflow:hidden property to the parent element

2. Add clear floating pseudo-class to parent element


. outer:after {        content: ".";        Display:block;        height:0;        Clear:both;        Visibility:hidden;        Overflow:hidden;    }

The P element next to IE6 produces a 3-pixel difference problem

Workaround: Use absolute positioning and inner edge

Adjacent block element margin overlay problem (BFC problem)

See Example:


p{        margin-bottom:100px;        margin-top:100px;    } ... <p>        <p>asdasdasdas China </p>        <p>asdasdasdas China </p>        <p> Asdasdasdas China </p>     </p>

The result is that the direct margin of P has been merged into 50px.

Workaround: Add Left/right floating to the last P element, triggering BFC.