css对于IE7、FF、OP清除浮动的最优方法
程序员文章站
2022-04-09 19:29:35
...
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。
方法真的很简单,只要为需要清浮动的标签加上overflow这个属性。
css代码
ul { list-style: none; height: auto; margin: 0; p adding: 0; background-color: #436973; } li { float: left; width: 80px; height: 80px; background-color: #83B1DF; } .demo { clear: both; border: 1px solid #FF00FF; margin-bottom: 5px; } .overflow { overflow: auto; zoom: 1; background-color: #43FF73; } ul { list-style: none; height: auto; margin: 0; padding: 0; background-color: #436973; } li { float: left; width: 80px; height: 80px; background-color: #83B1DF; } .demo { clear: both; border: 1px solid #FF00FF; margin-bottom: 5px; } .overflow { overflow: auto; zoom: 1; background-color: #43FF73; }
HTML代码
<div class="demo"> <ul class="overflow"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="demo"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
其中zoom是为了IE6准备的。
<?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"> <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标准,web,Blog,,XHTML,CSSForest,CSS森林" /> <title>Overflow hack Demo|www.CSSForest.org</title> <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" /> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script> <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;width:80px;height:80px;background-color:#83B1DF;} .demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;} .overflow{overflow:auto;zoom:1;background-color:#43FF73;} /*]]>*/ </style> </head> <body> <p></p> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div> <div> <div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div> <div> <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p> <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p> <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p> <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p> <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div> </div> </div> </body> </html>
注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对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"> <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标准,web,Blog,,XHTML,CSSForest,CSS森林" /> <title>Overflow hack Demo|www.CSSForest.org</title> <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" /> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script> <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属性只对IE起作用,auto/hidden可对FF、OP起作用。</p> <div> <ul> <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> <ul> <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> <ul> <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> <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> <div> <div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div> <div> <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p> <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p> <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p> <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p> <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div> </div> </div> </body> </html>
这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。
css代码:
overflow { height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible; }
上一篇: mysql-关于mfc应用程序的问题
下一篇: CSS禅意 - 捌莱闲人