CSS教程:浮動(dòng)元素對(duì)瀏覽器的支持

2024-07-11 08:24:36

字體：大中小

供稿：網(wǎng)友

當(dāng)元素設(shè)置浮動(dòng)(float)后會(huì)被移出文檔流，相信大家都會(huì)經(jīng)常遇到這樣的問(wèn)題。
這問(wèn)題的解決辦法有N種之多，因?yàn)槊糠N瀏覽器對(duì)CSS的解析各異，所以在不同瀏覽器使用清除浮動(dòng)的元素也會(huì)有所不同。
我認(rèn)為目前還沒(méi)有最好的清除浮動(dòng)元素或組合，而是根據(jù)情況分析而選擇，最好的清除浮動(dòng)元素或組合。
為了兼容不同瀏覽器，可能要使用不同的清除浮動(dòng)元素組合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}
以下分析了部份的消除浮動(dòng)元素對(duì)瀏覽器的支持：
運(yùn)行代碼框

<p>為了兼容不同瀏覽器，可能要使用不同的清除浮動(dòng)元素組合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}</p><p>以下分析了部份的消除浮動(dòng)元素對(duì)瀏覽器的支持：</p><p><span id="more-24"></span><a target="_blank" href="/flow.html">測(cè)試的實(shí)例</a></p><style type="text/css">    .m20080111{margin:auto; background:#000;font:12px/160% arial; }  .m20080111 td{background:#fff;padding:3px;}  .m20080111 th{background:#fff;color:#f00;padding:2px;}  .m20080111 strong{font-weight:normal;color:#f00;}  .m20080111 .y{background:#080;color:#fff;}  .m20080111 .n{background:#900;color:#fff;}</style><table border="0" width="98%" cellPadding="0" cellSpacing="1" class="m20080111"><tr><td colSpan="2">更新日期:2008/01/16</td><td colSpan="7" align="center">Windows</td></tr><tr><th width="2%" align="right"></th><th width="42%" align="right"></th><th width="8%" align="center">IE7</th><th width="8%" align="center">IE6</th><th width="8%" align="center">IE5.5</th><th width="8%" align="center">FF</th><th width="8%" align="center">Ns</th><th width="8%" align="center">Op</th><th width="8%" align="center">Sf</th></tr><tr><td align="center">1</td><td align="right">float:left / right;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">2</td><td align="right">&lt;div style=”clear:both;”&gt;&lt;/div&gt;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">3</td><td height="23" align="right">height:(等于內(nèi)容高度);</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">4</td><td align="right">:after</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">5</td><td align="right">overflow:hidden / auto;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">6</td><td align="right">width:100%;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">7</td><td align="right">height:1%;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">8</td><td align="right">zoom:1;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">9</td><td align="right">max-height:(等于或大于內(nèi)容);</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">10</td><td align="right">min-height:(等于或小于內(nèi)容);</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr><tr><td align="center">11</td><td align="right">display:inline-block;</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">12</td><td align="right">display:table;</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td></tr><tr><td align="center">13</td><td height="23" align="right">height:(小于內(nèi)容高度);</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="y">Y</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td><td align="center" vAlign="middle" class="n">N</td></tr></table>            </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">
<!--分享 -->
<div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1338783.html'>CSS教程:網(wǎng)頁(yè)文本漸變</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1338785.html'>CSS教程:創(chuàng)建性感的CSS樣式表</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>
<!--分享 -->
</div>

<div   id="iwvjtn8m0"   class="pinglun">
<!-- 評(píng)論 -->
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒(méi)什么話要說(shuō)嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title">
<tr>
<td><strong>發(fā)表評(píng)論</strong></td>
<td align="right"><a href="/e/pl/?classid=215&id=1338784">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1338784&down=2"></script></span>條評(píng)論</a></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="56%" align="left">用戶名:
<input name="username" type="text" class="inputText" id="username" value="" size="16" /></td>
<td width="44%" align="left">密碼:
<input name="password" type="password" class="inputText" id="password" value="" size="16" /></td>
</tr>
<tr>
<td align="left">驗(yàn)證碼:
<input name="key" type="text" class="inputText" size="10" />
<img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td>
<td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" />
匿名發(fā)表</td>
</tr>
</table>
<textarea name="saytext" cols="70" rows="6" id="saytext">

學(xué)習(xí)交流