none
Bug about "overflow:auto"(IE9 RC) RRS feed

  • 常规讨论

  • When changing the 'class' property of elements which are inside a container with style 'overflow:auto', the container cannot be properly rendered.

     

    Here's the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .z { background-color : gray }
    </style>
    <script type="text/javascript">
    var toggleClass = true;
    function hover(e)
    {
    if (toggleClass)
    e.target.className = "z";
    else
    e.target.style.backgroundColor = "gray";
    }
    function leave(e)
    {
    if (toggleClass)
    e.target.className = "";
    else
    e.target.style.backgroundColor = "";
    }

    </script>
    </head>
    <body>
    <div style="overflow:auto;width:800px;border:#ff6600 1px solid;">
    <div style="width:1000px;">
    <div onmouseover="hover(event)" onmouseout="leave(event)">Hover</div>
    </div>
    </div>
    </body>
    </html>

    When putting mouse over the 'Hover' DIV, the container's height changes, but its scrollbar stays.

     

    How to reproduce:

    1. create a container with style 'overflow:auto; width:NNNpx' (leave its height unfixed)

    2. put some elements inside the container and set their width greater than the container's

    3. change the elements' class property

     

    How to avoid:

    1. fix the container's height

    2. change the style property instead of the class property

     

    Could someone please help? Thanks. =)

    2011年3月11日 2:04