对于IE7、FF、OP清除浮动的最优方法第1/2页_经验交流

在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了. 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性. CSS代码 ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px

Overflow也可以用来清除浮动方法真的很简单,只要为需要清浮动的标签加上overflow这个属性. CSS代码:ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF0

今天小雷提到一个ie5下li产生空白行距的问题,下面来测试一下.  新建一个简单的HTML测试文件,下面来测试ul li标签. 复制代码 代码如下: <ul>   <li><a href="#">菜单一</a></li>   <li><a href="#">菜单一</a></li>   <li><a href="#">

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

我常用的都是clear:both;方法,如 <div style="clear:both">    <div style="float:left"></div>   <div style="float:right"></div> </div> 今在PlanABC看到另外这种方法,特些记录下来. div.container {  border: 1px solid #00000

CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div: <div class="clear"></div> .clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;} 这个方法目前已经广泛使用,淘宝.口碑,都是这种

CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div: <div class="clear"></div>.clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear{zoom:1;} 这个方法目前已经广泛使用,淘宝.口碑 3lian素

常用的清除浮动的方法有以下三种.      此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.         Left Right [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]      1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义

1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用"*+html",现在用IE7浏览一下,应该没有问题了. 现在写一个CSS可以这样: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html