3

縦に 2 つのフレーム、つまり 2 つの行を持つ単純なフレームセットがあります。

最初の行には固定ヘッダーが含まれています。

2 行目の上部には固定ツールバーがあり、下部にはサイズ変更可能なツールバーがあります。

ブラウザー間のレンダリングの違いにより、「コンテンツ」フレームのスクロールを有効にすることはできません。これは、ツールバーを含むフレーム全体が一部のブラウザーでスクロールするのに対し、下部のサイズ変更可能な部分のみがスクロールバーを取得することを意味するためです。他のブラウザで（これが私が欲しいものです）。以下の例には、コンテナと toolbarContainer 要素を制御するための css がありませんが、現時点では関係ありません。

問題は次のとおりです。以下のサンプル コードでは、IE7 (IE7 互換モードの IE8 ですが、純粋な IE7 でも同じ問題が発生します) を使用しているときにブラウザー ウィンドウのサイズを縦方向に変更すると、body 要素の onresize イベントが発生しません。私が試した他のすべてのブラウザーでは、onresize イベントが発生します。ブラウザー ウィンドウを水平方向にサイズ変更すると、IE7 でもイベントが発生します。

このコンテキストでの IE7 と onresize イベントに関する既知の問題はありますか?

注 1: フレームセットを完全に削除する必要があることは承知していますが、現時点ではこれはオプションではありません。

注 2: このトピックに関する情報を検索しましたが、この問題は IE7 とフレームのコンテキストでのみ発生するように思われるため、現在、多くの開発者に影響を与える可能性は低いです。

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Resize Test</title>
    </head>
    <frameset rows="104,*" framespacing="0" frameborder="no">
        <frame src="header.htm" name="header" frameborder="0" noresize="noresize" scrolling="no" marginheight="0" marginwidth="0" />
        <frame src="content.htm" name="content" frameborder="0"  marginheight="0" marginwidth="0" scrolling="no" />
    </frameset>
</html>

header.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Header</title>

        <style type="text/css" media="all">
              body { margin: 0px;
                     padding: 0px;
                     width: 100%;
                     height: 104px;
                   }
        </style>
    </head>

    <body>
        <img alt="" width="699" height="104" border="0" src="header.png" />
    </body>
</html>

content.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Content</title> 

        <script type="text/javascript">
            function repositionContainers() {
                //document.write('resize');
                var divWrapper = document.getElementById('wrapper');
                var divContainer = document.getElementById('container');
                var wrapWidth = divWrapper.clientWidth;
                var wrapHeight = divWrapper.clientHeight - 27;
                // (resizing code follows here ...)
            }
        </script>

        <style type="text/css" media="all">
            body { background: #ffa;
                   margin: 0px;
                   padding: 0px;
                   width: 100%;
                   height: 100%;
                 }
        </style>

    </head>

    <body onload = "repositionContainers();" onresize="repositionContainers();">
        <div id="wrapper">
            <div id="toolbarContainer">
                <img alt="" width="212" height="27" border="0" src="toolbar.png" />
            </div>
            <div id="container">
                <h1>Contents goes here ...</h1>
            </div>
        </div>
    </body>
</html>
4

1 に答える 1

7

DTD を使用する IE7 には次のものが必要です。

<style>
html, body {
    height: 100%;
}
</style>
于 2010-07-06T20:22:51.220 に答える