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

Question

我有一个脚本可以将 google charts api 信息加载到一个 div 中。 div 具有固定高度和滚动属性。但是，当加载来自 google 的表格时，它会溢出 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 高度属性。这是因为，显然，兼容模式下的 IE 8 呈现 css，然后忽略动态内容。