zoukankan      html  css  js  c++  java
  • overflow:hidden在opera里的奇怪现象

    今天写文本列表无缝滚动的时候发现,在opera里定义了overflow:hidden,虽然溢出内容隐藏了,但是奇葩的是高度却会被撑开。而其他浏览器均正常。求解?

    非常奇怪,同样的代码,一夜之间竟然没问题了

    下面是代码:

    View Code
    <!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="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>

    转载请注明出处:http://www.cnblogs.com/lecaf/

    如有任何建议或疑问,欢迎留言讨论。

    如果觉得文章不错的话,欢迎点一下右下角的推荐。

  • 相关阅读:
    java基础>包、访问权限、命名规范
    jsp>Session
    java基础>String类
    jsp>包含指令和forward指令
    jsp>response
    word不能输入中文
    java基础>正则表达式
    EJB>一对多及多对一映射
    Struts2>运行机制
    EJB>调用存储过程
  • 原文地址:https://www.cnblogs.com/lecaf/p/2014907.html
Copyright © 2011-2022 走看看