CSS Compatibility tips encyclopedia (ii)

Web page Production WEBJX article introduction: 6.DIV floating IE text generated 3 pixel bug left object floating on the right side of the outer patch to locate the left margin, the right object within the text will have 3px spacing from the left. #box {float:left; width:800px;} #left {float: Left width:50%;} #right {width:50%} *html #left {margin-right:-3px;//This is key} 7.IE catch fan

6.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}

　　

　　

　　

　　

7.IE Hide-and-Seek problem

When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.

Some content does not show up when the mouse selects this area is found to be true on the page. WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

8.float div closure; clear float; Adaptive height

① For example:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > here NOTFLOATC do not want to continue panning, but want to go down. (where the Floata, FLOATB properties have been set to float:left;)

This code has no problem with IE, the problem is ff. The reason is that NOTFLOATC is not a float label and the float label must be closed. In < #div class= "FLOATB" > < #div class= "NOTFLOATC" > plus < #div class= "clear" > this div must pay attention to the position, Also, there must be a nested relationship with two Div siblings with the float property, or an exception will be generated. and define clear this style as follows:. clear{Clear:both;

② as an external wrapper div do not set dead height, in order to allow the height can automatically adapt to the wrapper inside add Overflow:hidden; When the box contains float, the height of automatic adaptation in IE invalid, this time should trigger IE layout private properties (Evil ie Ah!) With Zoom:1, it can be done, so that it is compatible.

For example, a wrapper is defined as follows:

. colwrapper{Overflow:hidden; zoom:1; margin:5px auto;

③ for typography, the most common CSS description we use is probably float:left. Sometimes we need to do a unified background behind the N-column float div, for example:

　　

　　

　　

　　

　　

For example, we want to set the background of the page to blue to achieve the background color of all three columns is blue, but we will find that as the right of left center stretched down, and page actually saved height, the problem comes because page is not a float property, And our page is centered and cannot be set to float, so we should solve this

　　

　　

　　

　　

　　

　　

　　

Then embed a float left and the width is 100% div solution

Source: Web Front Wind

Responsible Editor: Bluehearts