"Original" CSS often encountered some strange ...

1, the margin-top of the child container set in Firefox is transferred to the parent container.

When setting Margin-top for Box2, only the parent container is used under FF.

Workaround:

A. Add Overflow:hidden to the parent container box; properties

B. Parent container box plus border properties other than none

C. Replace Margin-top with the padding-top of the parent container box

Http://bbs.blueidea.com/thread-2926494-1-1.html
2, margin-top failure
Because the parent container is set to float, and the child container does not have two workarounds, one clears the float, a parent container floats, and the child container floats
3. The height of Li in IE is higher than that of Firefox

Add attribute zoom:1 to UL in style sheet; it's OK.

A more perfect solution

UL {
margin:0;
padding:10px;
List-style:none;
Background-color: #006699;
zoom:1;/* IE */
}
Ul:after {
Content: ".";
Display:block;
Clear:both;
height:0;
font-size:0;
line-height:0;
}

See zoom resolution UL under IE Adaptive li Height (compatible with IE,FIREFOX,IE8)   http://123luoxiaoli.blog.163.com/blog/static/ 703343312013274376313/

4, UL in the space between Li, but there is no space on the right side of the container
We can't use simple margin-right to solve this situation. The width of the parent container is not enough, to fundamentally solve this problem, we can study the NetEase Sina's writing, NetEase has two kinds of writing, one is in the last Li add class=, of course, this is not very perfect, the best effect is NetEase home "pictures of the Dragon" area of the writing, very ingenious, Interested children shoes can be researched, in fact, the effective CSS is also very concise, only two or three properties

<div class= "im02limg" > <ul class= "Clearfix" > <li><a href= "#" target= "_blank" >  <p> name </p> </a> </li> <li><a href= "#" target= "_blank" >  <p> name </p> </a> </li> & Lt;li><a href= "#" target= "_blank" >  <p> name </p> < /a> </li> <li><a href= "#" target= "_blank" >  <p& gt; name </p> </a> </li> <li><a href= "#" target= "_blank" >  <p> name </p> </a> </li> </ul> </div> 

. Clearfix:after{content: "."; Display:block;height:0;visibility:hidden;clear:both;}
. clearfix{zoom:1;}
. clearit{clear:both;font-size:0;line-height:0;height:0;}
. clear {clear:both; height:1px; margin-top:-1px; overflow:hidden;}
. im02limg{width:672px; overflow:hidden;
}
. Im02limg ul{margin-left:-8px;
}
. Im02limg ul li{margin-left:8px; float:left; width:128px;_display:inline; overflow:hidden;
}
. Im02limg ul Li img{width:128px; height:128px;
}
. Im02limg ul Li p{widows:128px; height:40px; line-height:40px; text-align:center;
}

To pay attention to a few points, the parent container is set wide and beyond the hidden must be, UL page structure to add clearfix, otherwise are not effective, Li's _display:inline to solve the problem IE6 not adapt.

5. The background color of the parent container does not extend to the child container(or the bounding rectangle of the parent container does not open up the container)
<div class= "Wraper" >
<div class= "f_l" ></div>
<div class= "F_r" ></div>
<div class= "Clear" ></div>
</div>
You can find that the background color is set to Wraper, but in fact, the floating object does not add clear before the color will not continue to the sub-container, the solution is the above, only with the clear stepfather container to know the height of the child container, which is also I write CSS does not need to set high a reason, is also a skill.


[PostScript] in the writing style, many people like to set high fixed width floating, I write style process generally will try to reduce these wording, although compatibility is very good, but sometimes it will bring a lot of trouble. To reduce these high widths and floats, we must accumulate a lot of technical skills to ensure compatibility.