[导入]在firefox、IE中解决对浮动的不同解决问题

我们知道在对元素进行浮动时，除非是一张带有预设宽度的图片，否则你应该始终给浮动设定一个宽度，而设定宽度很多时候又限制了设计。
1、这方法实现了浏览器的兼容，可是固定了宽度。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*<![CDATA[*/
#wrap{ border:6px #ccc solid;float:left;width:100%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
/*]]>*/
</style>
</head>

<body>
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>

</body>
</html>
2、这方法在现代浏览器中显示正常，可是在低于IE7的版本中就wrap没有包含进colmun_left和colmun_right.
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*<![CDATA[*/
#wrap{ border:6px #ccc solid;overflow:auto;}
 .column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
/*]]>*/
</style>
</head>

<body>
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>

</body>
</html>
3、添加一个_height:1%专门调整IE6及以下版本
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*<![CDATA[*/
#wrap{ border:6px #ccc solid;overflow:auto;_height:1%;}
 .column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
/*]]>*/
</style>
</head>

<body>
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>

</body>
</html>

文章来源:http://link-to.cn/post/2007/12/在firefox、IE中解决对浮动的不同解决问题.aspx
posted @ 2007-12-14 17:01  sliuqin  阅读(432)  评论(0)    收藏  举报