CSS教程:浮动元素对浏览器的支持- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:浮动元素对浏览器的支持

CSS样式表: CSS 表单元素不继承body的字体属性; 网页制作学习教程 CSS Position; 网页设计学习教程 CSS盒模型; vertical-align 表单元素垂直对齐的解决方法; 不用Cookie的仿刷新二级高亮菜单; CSS3 优势以及网页设计师如何使用CSS3技术; CSS 网页制作提高CSS可阅读性; CSS 样式表中引用图片地址在各浏览器中的差异; CSS Sprite优化减少HTTP链接数; 网页制作中应用的50个CSS技巧(国外); CSS 英文教程 CSS语法; CSS 网页文字渐变效果; 纯css 圆角实现代码; CSS 新的图像替换方法; 不必需的样式脚本文件导致页面不能及时更新; CSS 约定写法利用扩展; 最全的CSS浏览器兼容问题小结; CSS 网页图文混排的10个技巧; IE的CSS制作网页技巧3则; 创造100% 自适应css布局的行之有效的方法

No. « ‹ 78 79 80 81 › »

技术文章搜索

关键字

CSS样式表中的 CSS教程:浮动元素对浏览器的支持

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 102 ::

收藏到网摘: n/a

CSS教程:CSS兼容的技巧闭合浮动元素让CSS代码更规范

当元素设置浮动(float)后会被移出文档流，相信大家都会经常遇到这样的问题。
这问题的解决办法有N种之多，因为每种浏览器对CSS的解析各异，所以在不同浏览器使用清除浮动的元素也会有所不同。
我认为目前还没有最好的清除浮动元素或组合，而是根据情况分析而选择，最好的清除浮动元素或组合。
为了兼容不同浏览器，可能要使用不同的清除浮动元素组合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}
以下分析了部份的消除浮动元素对浏览器的支持：
运行代码框

<p>为了兼容不同浏览器，可能要使用不同的清除浮动元素组合使用，如：{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}</p>
<p>以下分析了部份的消除浮动元素对浏览器的支持：</p>
<p><span id="more-24"></span><a target="_blank" href="/flow.html">测试的实例</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:(等于内容高度);</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:(等于或大于内容);</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:(等于或小于内容);</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:(小于内容高度);</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>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
注意：以上表格元素是指，当内容被移出文档流时清除元素对浏览器分支持
你是否也使用了以上表格元素或组合，如有更佳的消除浮动元素或方法，欢迎赐教！

CSS教程:CSS兼容的技巧闭合浮动元素让CSS代码更规范

CSS样式表 中的 CSS教程:浮动元素对浏览器的支持

评论 (0) All

CSS样式表中的 CSS教程:浮动元素对浏览器的支持