html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
CSS教程:浮动元素对浏览器的支持
时间:2016-04-10
当元素设置浮动(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"><div style=”clear:both;”></div></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教程:网页文本渐变
相关文章
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w
JQuery获取文章内容页自适应高度,优化界面外观
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径。alert(window.location.pathname
分享js跳转页面方法
spanid=tiao"
jquery对单位进行换算的“笨”方法
DEDE项目上 编辑软件大小(单位换算):$(doc
JS简单页面倒计时转跳
script language="javascript"&g
最新文章
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 p 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了
何为百度移动网站MIP?MIP对网站有什么帮助?
随着移动互联网的发展,网友们对于移动产品服务体验要求也越来越高,当然了像移动网站体验也包括在内,随着互联网技术的发展,现在移动网站页面技术也一直在提升和创新,今
js实现点击按钮复制文本功能
如何去掉html中input的边框
js 判断字符串中是否包含某个字符串
织梦DedeCms做SEO优化必做的步骤
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
怎么拿到input file上传的文件名字显示到页面中
何为百度移动网站MIP?MIP对网站有什么帮助?
swiper无法自动播放的解决办法
bootstrap在移动浏览器下响应式不起作用的解决方法