对于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;
height:80px;
background-color:#83B1DF;
}
.demo{
clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
.overflow{
overflow:auto;
zoom:1;
background-color:#43FF73;
}
ul{
list-style:none;
height:auto;
margin:0;
padding:0;
background-color:#436973;
}
li{
float:left;
width:80px;
height:80px;
background-color:#83B1DF;
}
.demo{
clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
.overflow{
overflow:auto;
zoom:1;
background-color:#43FF73;
}

HTML代码

<div class="demo">
<ul class="overflow">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="demo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>

其中zoom是为了IE6准备的。
Overflow hack Demo|www.CSSForest.org 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 查看图片

Ghost Zhang

Email:lovej1bz@gmail.com

QQ:22168741

ORG:WebReBuild.ORG www.CSSForest.ORG

Blog:http://forest.blogbus.com
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用javascript来控制 链接的target 属性的代码
在HTML4.0Strict和XHTML1.0STRICT里不允许在a标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以

多浏览器下IE6 IE7 firefox li 间距问题第1/2页
今天小雷提到一个ie5下li产生空白行距的问题,下面来测试一下。新建一个简单的HTML测试文件,下面来测试ulli标签。ulliahref="#"菜单一/a/liliahref="#"菜单

多浏览器css兼容分析小结
CSS兼容要点:1、DOCTYPE影响CSS处理。2、FF:div设置margin-left,margin-right为auto时已经居中,IE不行。3、FF:body设置text-align时,div需要设置margin:auto(主要是margin-left,