CSS:消除波动的最佳方式

2021-01-20 17:06 jianzhan

在CSS山林群里探讨1个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提前准备的。
详细的Demo
注:忘了1个很关键的內容,其实不是全部的overflow特性都可以起来1样的实际效果,例如visible特性就只能对IE起功效。事例能够看这里Demo2
这样的话就有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;
}

闭合波动元素:对于firefox用overflow:auto。对于ie用*height:1%或zoom:1。本人感觉overflow:auto少用为妙,会一些莫明其妙的难题。
最好是用这个方式:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */