0

Google チャート API 情報を div にロードするスクリプトがあります。div には固定の高さとスクロール プロパティがあります。ただし、Google からのテーブルが読み込まれると、div がオーバーフローします (下の画像を参照)。これは互換モードの IE 8 であり、CSS は次のとおりです。

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

これはIE8でどのように見えるかです（青いアウトラインは開発者ツールからのものですが、divの高さを示しています） 高さの制約を無視した動的コンテンツ

そして、これは Firefox での外観です (どのように見えるべきか) 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 に答える