兼容问题5 —— float.doc

兼容问题5 —— float ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2015年4月17日 16:25 一、 IE6 下 双边距 bug IE 6 下块元素有浮动和横向的margin 值 会被放大成两倍 解决： display:inline; ? 二、 IE67 下， li 本身没有浮动，但是li 里面的内容有浮动。Li 下边就会产生间隙 解决： 给li加浮动（加宽度） 给li加 vertical-align:top; 三、 注意： 当IE6下最小高度问题，和 li 下间隙问题，共存时候 解决： 给 li 加 解决间隙 overflow:hidden; （最小高度） 加浮动 float:left; 加宽度 四、 当一行子元素占有宽度之和 与 父级的宽度相差超过3px， 或者有不满行的状态时候， 最后一行子元素的 margin-bottom 在IE6下就会失效。 暂无解决办法。 五、IE6下的文字溢出bug ? 子元素的宽度和父级的宽度相差小于 3px 的时候, 两个浮动元素中间有注释或者内嵌元素。 ? 解决： 用div将其包起来 六、当浮动元素和绝对定位元素是并列关系时， 在IE6下绝对定位元素会消失掉。 解决： 给绝对定位元素外面套一个div,这样他们就不是并列关系了 ? ? ———————————————————————————————————————————————————————————— IE6 下的双边距 bug IE 6 块元素 块元素有浮动和横向的margin 值 会被放大成两倍 解决： display:inline; titleInsert title here/title style body{margin:0;} .box{width:200px;height:200px;background:red;float:left;margin:100px;} /style /head body div class=box ? /div ? /body ? ——————————————————————————————————————————————————————————————————————— margin-right 一行右侧有双边距 margin-left 一行左侧有双边距 ? ? titleInsert title here/title style .box{float:left;border:10px solid #000;} .box div{width:100px;height:100px;background:red;margin:0 20px;border:5px solid blue;float:left;} /style /head body div class=box div1/div div2/div div3/div div4/div div5/div /div ? /body ? —————————————————————————————————————————————————————————————————— ? IE67 下， li 本身没有浮动，但是li 里面的内容有浮动。Li 下边就会产生间隙 解决： 给li加浮动（加宽度） 给li加 vertical-align:top; ? titleInsert title here/title style ul{margin:0;padding:0;width:302px;} li{list-style:none;height:30px;border:1px solid red;} a{width:100px;float:left;height:30px;background:blue;} span{width:100px;float:right;height:30px;background:yellow;} /style /head body ul li a href=#/a???????? span/span /li???????? li a href=#/a???????? span/span /li li a href=#/a???????? span/span /li /ul ? /body style ul{margin:0;padding:0;width:302px;} li{list-style:none;height:30px;border:1px solid red;float:left;width:300px;} a{width:100px;float:left;height:30px;background:blue