全国服务热线:4008-888-888

技术知识

标识提升CSS的overflow特性来消除波动


这个方式不单应用简易,并且FF、OP、IE7都适用,从此能够道别那又长适配性又差的FF清波动的方式了。
方式真的很简易,要是为必须清波动的标识再加overflow这个特性。
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提前准备的。
注:忘了1个很关键的內容,其实不是全部的overflow特性都可以起来1样的实际效果,例如visible特性就只能对IE起功效。这样的话就有1个难题啦,假如要有高宽比,并且內容超过高宽比的情况下,界定auto或hidden都可以能会有1些不要想的实际效果出現。这里出示1个处理计划方案:针对IE6及下列版本号的IE,能够立即界定高宽比;针对IE7、FF、OP,可界定min-height。
CSS编码
overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服