兼容问题5 —— float.doc

兼容问题5 float2015年4月17日16:25一、 IE6 下 双边距 bug1. IE 6 下块元素有浮动和横向的margin 值2. 会被放大成两倍解决：display:inline;二、 IE67 下， li 本身没有浮动，但是li 里面的内容有浮动。Li 下边就会产生间隙解决：1. 给li加浮动（加宽度）2. 给li加 vertical-align:top;三、 注意：当IE6下最小高度问题，和 li 下间隙问题，共存时候解决：给 li 加 解决间隙 overflow:hidden; （最小高度） 加浮动 float:left; 加宽度四、 当一行子元素占有宽度之和 与 父级的宽度相差超过3px，或者有不满行的状态时候，最后一行子元素的 margin-bottom 在IE6下就会失效。暂无解决办法。五、IE6下的文字溢出bug子元素的宽度和父级的宽度相差小于 3px 的时候,两个浮动元素中间有注释或者内嵌元素。解决：用div将其包起来六、当浮动元素和绝对定位元素是并列关系时，在IE6下绝对定位元素会消失掉。解决：1. 给绝对定位元素外面套一个div,这样他们就不是并列关系了IE6 下的双边距 bug 1. IE 6 2. 块元素3. 块元素有浮动和横向的margin 值4. 会被放大成两倍解决：display:inline;Insert title herebodymargin:0;.boxwidth:200px;height:200px;background:red;float:left;margin:100px;margin-right 一行右侧有双边距margin-left 一行左侧有双边距Insert title here.boxfloat:left;border:10px solid #000;.box divwidth:100px;height:100px;background:red;margin:0 20px;border:5px solid blue;float:left;12345IE67 下， li 本身没有浮动，但是li 里面的内容有浮动。Li 下边就会产生间隙解决：1. 给li加浮动（加宽度）2. 给li加 vertical-align:top;Insert title hereulmargin:0;padding:0;width:302px;lilist-style:none;height:30px;border:1px solid red;awidth:100px;float:left;height:30px;background:blue;spanwidth:100px;float:right;height:30px;background:yellow;ulmargin:0;padding:0;width:302px;lilist-style:none;height:30px;border:1px solid red;float:left;width:300px;awidth:100px;float:left;height:30px;background:blue;spanwidth:100px;float:right;height:30px;background:yellow;ulmargin:0;padding:0;width:302px;lilist-style:none;height:30px;border:1px solid red;vertical-align:top;awidth:100px;float:left;height:30px;background:blue;spanwidth:100px;float:right;height:30px;background:yellow;注意：当IE6下最小高度问题，和 li 下间隙问题，共存时候解决：给 li 加 解决间隙 overflow:hidden; （最小高度） 加浮动 float:left; 加宽度Insert title hereulmargin:0;padding:0;width:302px;lilist-style:none;height:12px;border:1px solid red;awidth:100px;float:left;height:12px;background:blue;spanwidth:100px;float:right;height:12px;background:yellow;ulmargin:0;padding:0;width:302px;lilist-style:none;height:12px;border:1px solid red;vertical-align:top;overflow:hidden;awidth:100px;float:left;height:12px;background:blue;spanwidth:100px;float:right;height:12px;background:yellow;ulmargin:0;padding:0;width:302px;lilist-style:none;height:12px;border:1px solid red;overflow:hidden;float:left;width:300px;awidth:100px;float:left;height:12px;background:blue;spanwidth:100px;float:right;height:12px;background:yellow;Insert title here.boxfloat:left;border:10px solid #000;.box divwidth:100px;height:100px; background:red;margin:20px; border:5px solid #ccc;float:left;12345Insert title here.boxborder:10px solid #000;width:600px; overflow:hidden;.box divwidth:100px;height:100px; background:red;margin:20px; border:5px solid #ccc;float:left;display:inline;123412341234.boxborder:10px solid #000;width:603px; overflow:hidden;.box divwidth:100px;height:100px; background:red;margin:20px; border:5px solid #ccc;float:left;display:inline;Insert title here.boxborder:10px solid #000;width:600px; overflow:hidden;.box divwidth:100px;height:100px; background:red;margin:20px; border:5px solid #ccc;float:left;display:inline;12341234123 当一行子元素占有宽度之和 与 父级的宽度相差超过3px，或者有不满行的状态时候，最后一行子元素的 margin-bottom 在IE6下就会失效。暂无解决办法。.boxwidth:400px;.leftfloat:left;.rightwidth:400px;float:right;↓leo是个胖子当浮动元素和绝对定位元素是并列关系时，在IE6下绝对定位元素会消失掉。解决：1. 给绝对定位元素外面套一个div,这样他们就不是并列关系了Insert title here.boxwidth:200px;height:200px;border:1px solid #000;position:relative;spanwidth:50px;height:50px;background:yellow;position:absolute;right:-20px;top:0;.boxwidth:200px;height:200px;border:1px solid #000;position:relative;spanwidth:50px;height:50px;background:yellow;position:absolute;right:-20px;top:0;ulwidth:150px;height:150px;background:red;margin:0 0 0 50px;padding:0;.boxwidth:200px;height:200px;border:1px solid #000