0

我有一个将谷歌图表 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/

4

1 回答 1

0

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

于 2012-10-12T18:21:26.567 回答