Div高度不适用于动态内容IE

Question

我有一个脚本可以将谷歌图表api信息加载到div中。 div具有固定高度和滚动属性。但是，当谷歌加载表时，它会溢出div（见下图）。这是在IE 8的兼容模式下，css如下：

div.dashwrapper .no_overflow{overflow-x: hidden; overflow-y: scroll; height: 300px;}

这是IE8中的样子（蓝色轮廓来自开发人员工具，它概述了div的高度）

这就是它在Firefox中的样子（看起来应该如何）

以下是HTML / Javascript：

<script>
var table = new google.visualization.Table(document.getElementById('chain_info_this_year'));
    table.draw(data , {showRowNumber: true});

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Store Name');
    data.addColumn('string', 'Chain');
    data.addColumn('number', 'Intakes <?php echo date("F");?>');
    data.addColumn('number', 'Ships <?php echo date("F");?>');
    data.addColumn('number', 'Intakes <?php echo date("Y");?>');
    data.addColumn('number', 'Ships <?php echo date("Y");?>');
    data.addRows([
                <?php 
                for ($i = 0; $i < count($store_info); $i++)
                {

                    if ($i <count($store_info) - 1)
                        echo "['" . str_replace("'", '',$store_info[$i]['chain']) . "', '" . str_replace("'", '', $store_info[$i]['store']). "', "  . $store_info[$i]['intakes_this_month'] . "," 
                            . $store_info[$i]['ships_this_month'] . "," . $store_info[$i]['intakes_this_year'] . "," . $store_info[$i]['ships_this_year'] . "],";   
                    else 
                        echo "['" . str_replace("'", '',$store_info[$i]['chain']) . "', '" . str_replace("'", '', $store_info[$i]['store']). "', "  . $store_info[$i]['intakes_this_month'] . "," 
                                . $store_info[$i]['ships_this_month'] . "," . $store_info[$i]['intakes_this_year'] . "," . $store_info[$i]['ships_this_year'] . "]";
                }
                ?>
                ]);
            var table = new google.visualization.Table(document.getElementById('store_info'));
    table.draw(data , {showRowNumber: true});

    </script>
    <div class='dash_row no_overflow'>
    <div class='dash_mod full_width'>
        <div class='title'>Store Information <span class='small_text space_left'><a style='cursor: pointer' onclick = "expand();">Show All</a></span></div>
        <div class='mod_content'><span id='store_info'></span></div>
    </div>
</div>

还有更多的HTML，但这是相关的东西。但是dash_row div在dashwrapper中，只是为了澄清。

更新：JSFiddle链接：http://jsfiddle.net/qKzLf/

Answer 1

我发现的唯一解决方案是在内容加载后使用JQuery重置css height属性。这是因为，显然，IE 8在兼容模式下呈现css，然后用动态内容忽略它。