[导入]在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

转载于:https://www.cnblogs.com/sliuqin/archive/2007/12/14/1018808.html