IE7與FireFox、IE8下CSS浮動對比

來源:互聯網
上載者:User
IE7:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
</head>
<body>
<div style="width:600px;height:300px;background-color:Black;float:left;"></div>
<div style="width:600px;height:300px;background-color:Yellow;float:right;"></div>
<div style="background-color:Green;height:100px;">aa</div><!--在IE7下div並不會被隱藏到浮動元素的下方,說
明浮動元素對於div來說是佔位的-->
<table style="background-color:Red;height:10px;width:10px;"><!--在IE7下浮動元素對table會佔位--> 
<tr>
<td>
</td>
</tr>
</table>
<span style="clear:both;"><!--在IE7下非區塊層級元素可以清除浮動-->
456
</span>

</body>
</html>

FireFox/IE8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<body>
<div style="width:600px;height:300px;background-color:Black;float:left;"></div>
<div style="width:600px;height:300px;background-color:Yellow;float:right;"></div>
<div style="background-color:Green;height:100px;">aa</div><!--在IE8下div會被隱藏到浮動元素的下方,說明浮動元素對於
div來說是不佔位的,但是aa被擠在了中間,說明浮動元素對div中的非區塊層級元素是要佔位的-->
<table style="background-color:Red;height:10px;width:10px;"><!--在IE8下浮動元素對table會佔位,由此更佳說明在IE8和
FireFox下浮動元素只對div來說不佔位--> 
<tr>
<td>
</td>
</tr>
</table>
<span style="clear:both;"><!--在IE8下非區塊層級元素不可以清除浮動-->
456
</span>
<p style="clear:both;"><!--在IE8下區塊層級元素可以清除浮動-->
789
</p>
</body>
</html>

另外有幾個需要注意的地方:
div的display:inline後會完全消失

在IE和FireFox下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<body>
<div  style="background-color:Maroon; width:60px; height:60px; float:left;">

</div><!--浮動元素會對其緊接的區塊層級元素減少部分塊,例如table:t1是區塊層級元素,div浮動後t1卻在div的右邊沒有滿滿的佔滿一行只佔滿了div右邊部分-->
<table id="t1" style="background-color:Green; width:60px; height:60px;">
<tr>
<td>

</td>
</tr>
</table>
第二行
</body>
</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.