注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

clear:both 在(IE6/IE7)下失效的解决办法  

2014-08-21 18:02:17|  分类: CSS兼容专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

clear:both 在(IE6/IE7)下失效的解决办法

欢迎学习交流----梦幻雪冰
为了做下面这个页面效果,可能会遇到这个clear:both;的问题
clear:both 在(IE6/IE7)下失效的解决办法 - 梦幻雪冰 - 梦幻雪冰
先来介绍一下做这个页面的思路:做这个页面的时间轴布局其实是比较简单的,左边的块进行左浮动,右边的块进行右浮动,发现浮动之后模块会显示在同一行,所以在浮动之后设置了clear:both,每一个模块才能独立显示一行,这样效果轻松的实现出来了。欢迎学习交流----梦幻雪冰

可能大家还不够了解clear:both;到底能起什么作用?
clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.
clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.
clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.
看完之后,来实现这个效果的大概布局吧!

具体还是来写一下demo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.wrap {
width: 500px;
height: 600px;
background: #fcf;
}
.con-l {
float: left;
clear: both;
width: 200px;
height: 100px;
margin-bottom: 30px;
background: #ff0;
}
.con-r {
float: right;
clear: both;
width: 200px;
height: 100px;
margin-bottom: 30px;
background: #0ff;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="con-r">第一个模块---梦幻雪冰</li>
<li class="con-l">第二个模块---梦幻雪冰</li>
<li class="con-r">第三个模块---梦幻雪冰</li>
<li class="con-l">第四个模块---梦幻雪冰</li>
</ul>
</div>
</body>
</html>

在谷歌测试的效果:

 clear:both 在(IE6/IE7)下失效的解决办法 - 梦幻雪冰 - 梦幻雪冰
 在 IE6/IE7测试的效果:
clear:both 在(IE6/IE7)下失效的解决办法 - 梦幻雪冰 - 梦幻雪冰
为什么效果会差别这么大,因为发现原来是clear:both搞的鬼,在IE6/IE7下clear:both好像没有起到效果,所以才出现这样的效果。
简单的理解就是clear:both在谷歌、火狐等浏览器下,可以清除掉所有上文的float浮动。下面的float就仅仅相对于下文的位置了。但在IE6,IE7下就不一样,本元素的clear:both;只是让本元素不相对于上面进行浮动,它后面的元素照样会飘上去。
 那怎么解决这个兼容问题?欢迎学习交流----梦幻雪冰
【第一种方法】空标签清浮动(不推荐使用)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.wrap {
width: 500px;
height: 600px;
background: #fcf;
}
.con-l {
float: left;
clear: both;
width: 200px;
height: 100px;
margin-bottom: 30px;
background: #ff0;
}
.con-r {
float: right;
clear: both;
width: 200px;
height: 100px;
margin-bottom: 30px;
background: #0ff;
}
.clear {
overflow: hidden;
clear: both;
height: 0;
line-height: 0;
}

</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="con-r">第一个模块---梦幻雪冰</li>
<li class="clear"></li>
<li class="con-l">第二个模块---梦幻雪冰</li>
<li class="clear"></li>
<li class="con-r">第三个模块---梦幻雪冰</li>
<li class="clear"></li>
<li class="con-l">第四个模块---梦幻雪冰</li>
</ul>
</div>
</body>
</html>

缺点:这样无形中增加了大量空标签,也增加了大量代码量,给后期维护带来一定的麻烦
有点:容易实现和掌握
【第二种方法】用IE hack技术来解决

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.wrap {
width: 500px;
height: 600px;
background: #fcf;
}
.con-l {
float: left;
clear: both;
*float: none;
width: 200px;
height: 100px;
margin-bottom: 30px;
background: #ff0;
}
.con-r {
float: right;
clear: both;
width: 200px;
height: 100px;
margin-bottom: 30px;
background: #0ff;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="con-r">第一个模块---梦幻雪冰</li>
<li class="con-l">第二个模块---梦幻雪冰</li>
<li class="con-r">第三个模块---梦幻雪冰</li>
<li class="con-l">第四个模块---梦幻雪冰</li>
</ul>
</div>
</body>
</html>

*float: none;其实就是等同clear:both
欢迎学习交流----梦幻雪冰
  评论这张
 
阅读(73)| 评论(5)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017