float:
float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。
这是MacIE的著名的bug,倘若不知道就会走弯路。
float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。
所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。
因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。
也可以使用hack方法为IE指定特别的值。
float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

float的div一定要闭合
例如:(其中floatA、floatB的属性已经设置为float:left;)
程序代码
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。
原因是NOTfloatC并非float标签,必须将float标签闭合。
在程序代码
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
之间加上 程序代码
<#div class="clear"></#div>
这个div一定要注意声明位置,一定要放在最恰当的地方,
而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
程序代码 .clear{ clear:both; }
此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义: 程序代码 .colwrapper{ overflow:hidden; zoom:1; margin:5px auto; }


清除浮动
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级 做一次定义,那么就可以解决这个问题。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

posted on 2015-07-23 17:42  琪琪fjq  阅读(205)  评论(0编辑  收藏  举报