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" "">
    <style type="text/css">
    .z { background-color : gray }
    <script type="text/javascript">
    var toggleClass = true;
    function hover(e)
    if (toggleClass) = "z";
    else = "gray";
    function leave(e)
    if (toggleClass) = "";
    else = "";

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

    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