CSS教程:浮动元素对浏览器的支持

2016-02-19 23:16 7 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的CSS教程:浮动元素对浏览器的支持,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

当元素设置浮动(float)后会被移出文档流,相信大家都会经常遇到这样的问题。

这问题的解决办法有N种之多,因为每种浏览器对CSS的解析各异,所以在不同浏览器使用清除浮动的元素也会有所不同。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

我认为目前还没有最好的清除浮动元素或组合,而是根据情况分析而选择,最好的清除浮动元素或组合。

为了兼容不同浏览器,可能要使用不同的清除浮动元素组合使用,如:{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;}

以下分析了部份的消除浮动元素对浏览器的支持:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

注意:以上表格元素是指,当内容被移出文档流时清除元素对浏览器分支持

你是否也使用了以上表格元素或组合,如有更佳的消除浮动元素或方法,欢迎赐教!

来源:http://www.tulaoshi.com/n/20160219/1629554.html

延伸阅读
标签: Web开发
最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+Css的标准开发有了进一步的了解。有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的闭合浮动元素的问题: 一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是...
itudou支持哪些浏览器   有些朋友在下载了itudou之后发现自己的电脑用不了itudou,这是什么原因呢?小编也遇到过这样的问题,之后小编发现原来是我用的浏览器和itudou不兼容,那么itudou支持哪些浏览器呢?   itudou支持各类主流IE内核的浏览器: 支持IE6、IE7、IE8、IE9、奇虎360、世界之窗(The World)、傲游(Maxt...
标签: Web开发
如何检测用户的浏览器是否支持CSS3,我们需要使用HTML,CSS和JavaScript来完成这件事情。下面是步骤。 1)先制作下面的HTML 1.span id="check" rel="Detect"/span 2)然后书写下面的CSS 01.#check { 02.  display: none; 03.  width: 0; 04.  height: 0; 05.} 06.#check[rel^="D"] {...
标签: Web开发
终究CSS3 和 HTML5 的组合会成为下一个Web标准,而且越来越多的浏览器开始支持更多的新属性,Firefox 3.5.3就给我们 带来了很多的惊喜,相信在以后也会。 是一个简单实用的在线应用,帮助我们检测使用的浏览器版本是否支持CSS3 和 HTML5,支持哪些属性。 让我们来看下当前 各种不同的浏览器对CSS3 和 HTML5的支持状况 吧。 排名第一的是Saf...
标签: Web开发
提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。 float属性在页面排版上非常有用,但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元素浮动,则该元素的高度不会包括浮动子元素的高度,而只会包含其内部...

经验教程

384

收藏

65
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部