ie6中关于浮动的畸形问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-08-19 10:05:30　-　阅:　-　评:0　-　积分:0

昨天搞了一天的公司网站bug，现在脑袋里就记住一个词--bug！本来上午在逛贴吧的，看到一小伙伴有问题（问题出处：http://tieba.baidu.com/p/3232417410），洒家正在写代码解决ie6的bug的，后来技术总监找我说网站登录有问题，ie7下登录会一直弹窗，具体的弹窗如下图：

一搞就是一下午，坑爹，还好最后解决了，具体原因不知道是什么，只知道有登录处的jquery循环用了两次，删除了一次就解决了问题。这个好像扯远了，还是先来看小伙伴的问题吧，如下图：

由于小伙伴附有源码，洒家就直接对源码进行修改，如果是可以添加新标签的话，那解决起来就很容易了，直接在“left2”后面添加一个清除浮动的标签就彻底解决了兼容性问题，完整源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ie6中关于浮动的畸形问题---艺灵设计,qq群:231749938</title>
<meta name="keywords" content="清除浮动,ie6 bug,zoom:1,ie6下双边距问题，畸形浮动问题">
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<style>div{border:2px solid black;width:100px;height:100px;}
#left{background:red;margin:50px;float:left;}
#left2{background:red;margin:50px;float:left;}
#right{background:yellow;margin:50px;float:left;clear:left;}
#right2{background:yellow;margin:50px;float:left;}
</style>
</head>
<body>
<div id="left">L1</div>
<div id="left2">L2</div>
<div style="clear:both; font-size:0; overflow:hidden;height: 0;line-height: 0;border: 0;"></div>
<div id="right">R1</div>
<div id="right2">R2</div>
</body>
</html>

如果是不增加样式和标签的情况下，解决起来还真有点困难，下面来一步步分析。
默认情况先不浮动，此时效果为都是一列；如图：

css样式：

div{border:2px solid black;width:100px;height:100px;margin:50px;}
#left{background:red;}
#left2{background:red;}
#right{background:yellow;}
#right2{background:yellow;}

由于“L1”和“L2”在同一行显示，所以“L1”和“L2”都需要进行浮动，同时要解决ie6下双边距的问题；如图：
　
css样式：

div{border:2px solid black;width:100px;height:100px;margin:50px;}
#left{background:red;float:left;_display:inline;}
#left2{background:red;float:left;}
#right{background:yellow;}
#right2{background:yellow;}

然后再来让“R1”和“R2”成一行显示，“R1”和“R2”均需要浮动，并且“R1”需要清除前面的“L2”的浮动影响来达到另起一行的效果；如图：
　
css样式：

div{border:2px solid black;width:100px;height:100px;margin:50px;}
#left{background:red;float:left;_display:inline;}
#left2{background:red;float:left;}
#right{background:yellow;float:left;clear:left;_display:inline;}
#right2{background:yellow;float:left;}

此时在ie7以下就会出现小伙伴的那个问题了，现在需要对ie7以下进行单独的设置了。又是ie6 bug,啊啊啊，头痛!怎么设置了，如果不知道思路的话，即使你捣腾10天也不一定能捣腾的出来，好了，洒家也不卖关子了，直接说吧。对页面中的4个“div”对象全部转换成内联元素，“R3”和“R4”需要进行清除浮动和自适应高度处理。如下图：
　
完整源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6中关于浮动的畸形问题---艺灵设计,qq群:231749938</title>
<meta name="keywords" content="清除浮动,ie6 bug,zoom:1,ie6下双边距问题，畸形浮动问题">
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com"><style>
*{margin:0; padding:0}#left,#left2,#right,#right2{border:2px solid black;width:100px;height:100px;margin:50px;float:left;;display:inline}
#left,#left2{background:red;}
#right,#right2{background:yellow;*float:none;*zoom:1;}
#right{clear:left;}
</style>
</head>
<body>
<div id="left">L1</div>
<div id="left2">L2</div>
<div id="right">R1</div>
<div id="right2">R2</div>
</body>
</html>

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-08-19/192.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！