快捷導(dǎo)航

對(duì)于IE7、FF、OP清除浮動(dòng)的最優(yōu)方法

更新時(shí)間：2007年11月15日 21:43:33 作者：

注：忘了一個(gè)很重要的內(nèi)容，并不是所有的overflow屬性都可起來一樣的效果，比如visible屬性就只能對(duì)IE起作用。例子可以看這里

<?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">  <head>  <meta http-equiv="pragma" content="no-cache" />  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta http-equiv="Content-Language" content="utf-8" />  <meta name="robots" content="all" />  <meta name="author" content="Ghost" />  <meta name="Copyright" content="CSSForest" />  <meta name="Description" content="CSSɭ" />  <meta name="Keywords" content="CSS,web標(biāo)準(zhǔn),web,Blog,,XHTML,CSSForest,CSS森林" />  <title>Overflow hack Demo|www.CSSForest.org</title>  <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />      <style type="text/css">  /*<![CDATA[*/  .copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}  .copyright a:link{color:#666666;text-decoration:none;}  .copyright a:hover{color:#CC9900;text-decoration:underline;}  ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}  li{float:left;height:80px;margin-right:2px;padding:0 10px;background-color:#83B1DF;line-height:80px;}  .demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}  .overflow{overflow:auto;zoom:1;background-color:#43FF73;}  .overflow1{overflow:hidden;zoom:1;background-color:#43FF73;}  .overflow2{overflow:visible;zoom:1;background-color:#43FF73;}  /*]]>*/  </style>  </head>  <body>  <p>overflow的visible屬性只對(duì)IE起作用，auto/hidden可對(duì)FF、OP起作用。</p>  <div   id="wppm3vysvbp"   class="demo">      <ul class="overflow">          <li>overflow:auto;</li>          <li>overflow:auto;</li>          <li>overflow:auto;</li>          <li>overflow:auto;</li>          <li>overflow:auto;</li>          <li>overflow:auto;</li>      </ul>  </div>  <div   id="wppm3vysvbp"   class="demo">      <ul class="overflow1">          <li>overflow:hidden;</li>          <li>overflow:hidden;</li>          <li>overflow:hidden;</li>          <li>overflow:hidden;</li>          <li>overflow:hidden;</li>          <li>overflow:hidden;</li>      </ul>  </div>  <div   id="wppm3vysvbp"   class="demo">      <ul class="overflow2">          <li>overflow:visible;</li>          <li>overflow:visible;</li>          <li>overflow:visible;</li>          <li>overflow:visible;</li>          <li>overflow:visible;</li>          <li>overflow:visible;</li>      </ul>  </div>  <div   id="wppm3vysvbp"   class="demo">      <ul>          <li>no overflow</li>          <li>no overflow</li>          <li>no overflow</li>          <li>no overflow</li>          <li>no overflow</li>          <li>no overflow</li>      </ul>  </div>  <div   id="wppm3vysvbp"   class="copyright">    <div   id="wppm3vysvbp"   class="vcard">      <div   id="wppm3vysvbp"   class="logodiv"><img class="logo" src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>      <div   id="wppm3vysvbp"   class="info">        <p class="fn n"><strong class="given-name">Ghost</strong> <strong class="family-name">Zhang</strong></p>        <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com" class="email">lovej1bz@gmail.com</a></p>        <p class="qq"><strong>QQ:</strong><a href="tencent://message/?uin=22168741&amp;Site=webrebuild.org&amp;Menu=yes" class="uid">22168741</a></p>        <p class="org"><strong>ORG:</strong><a >WebReBuild.ORG</a> <a >www.CSSForest.ORG</a></p>        <strong>Blog:</strong><a  class="url" rel="me">http://forest.blogbus.com</a> </div>    </div>  </div>  </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

這樣的話就有一個(gè)問題啦，如果要有高度，而且內(nèi)容超出高度的時(shí)候，定義auto或hidden都可能會(huì)有一些不想要的效果出現(xiàn)。這里提供一個(gè)解決方案：對(duì)于IE6及以下版本的IE，可以直接定義高度；對(duì)于IE7、FF、OP，可定義min-height。

CSS代碼

復(fù)制代碼代碼如下:

overflow   
{   
height:auto;   
_height:200px;   
min-height:200px;   
verflow:auto;   
zoom:1;   
_overflow:visible;   
} 

您可能感興趣的文章: