phpStudy
phpStudy
网站首页
软件下载
PHP教程
编程技术
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
window
Linux
Mac
ASP
服务器
CMS
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
PostgreSQL
SQLite
教程手册
php
html
html5
css
css3
JavaScript
ajax
jquery
sql
ado
asp
aspnet
browsers
careers
dhtml
dotnetmobile
dtd
e4x
glossary
hosting
htmldom
json
media
msnet
quality
rdf
rss
schema
semweb
site
sitemap
smil
soap
svg
tags
tcpip
vbscript
w3c
wap
web
webservices
wmlscript
wsdl
xforms
xhtml
xlink
xml
xmldom
xpath
xquery
xsl
xslfo
网站测速
小皮面板
智能dns
搜索
首页
PHP教程
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"><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 全部选择 提示:你可先修改部分代码,再按运行]
注意:以上表格元素是指,当内容被移出文档流时清除元素对浏览器分支持
你是否也使用了以上表格元素或组合,如有更佳的消除浮动元素或方法,欢迎赐教!
«
»
PHP教程
PHP简介
PHP基本语法
PHP类型
PHP变量
PHP运算符
PHP控制结构
PHP函数
PHP类与对象
PHP异常处理
函数库分类
快速导航
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
Linux
Mac
ASP
服务器
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
SQLite
wamp
交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3