overflow:hidden在opera里的奇怪现象
今天写文本列表无缝滚动的时候发现,在opera里定义了overflow:hidden,虽然溢出内容隐藏了,但是奇葩的是高度却会被撑开。而其他浏览器均正常。求解?
非常奇怪,同样的代码,一夜之间竟然没问题了
下面是代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/** reset css **/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
body,button,input,select,textarea{font:12px/1.5 Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;}
body,html{height:100%;}
em{font-style:normal;}
:focus{outline:0;}
a{ text-decoration:none;}
a:hover{text-decoration:underline;}
.winlist{
margin:4px 10px 0 12px;
position:relative;
height:260px;
overflow:hidden;
zoom:1;
}
.winlist ul{
position:absolute;
width:100%;
}
.winlist ul li{
line-height:22px;
height:22px;
color:#9d1f24;
font-size:14px;
padding-right:72px;
position:relative;
}
.winlist ul li .sum{
display:block;
width:70px;
position:absolute;
right:0;
top:0;
text-align:right;
}
.winlist ul li .name{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:100%;
}
</style>
</head>
<body style="position:relative;">
<div style="width:600px; background:#CCC; position:relative;">
<div class="winlist" id="winlist">
<ul id="winobj">
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/** reset css **/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
body,button,input,select,textarea{font:12px/1.5 Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;}
body,html{height:100%;}
em{font-style:normal;}
:focus{outline:0;}
a{ text-decoration:none;}
a:hover{text-decoration:underline;}
.winlist{
margin:4px 10px 0 12px;
position:relative;
height:260px;
overflow:hidden;
zoom:1;
}
.winlist ul{
position:absolute;
width:100%;
}
.winlist ul li{
line-height:22px;
height:22px;
color:#9d1f24;
font-size:14px;
padding-right:72px;
position:relative;
}
.winlist ul li .sum{
display:block;
width:70px;
position:absolute;
right:0;
top:0;
text-align:right;
}
.winlist ul li .name{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:100%;
}
</style>
</head>
<body style="position:relative;">
<div style="width:600px; background:#CCC; position:relative;">
<div class="winlist" id="winlist">
<ul id="winobj">
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
<li><span class="name">username</span><span class="sum">9998.20</span></li>
</ul>
</div>
</div>
</body>
</html>