2

個々の「ページ」を含むいくつかの Div を含む Web ページがあります。次の CSS スタイルを定義しました。

@charset "utf-8";
/* CSS Document */

.hideDiv{
    display:none;
}

.showDiv{
    display: inline;
}

すべてが正常に機能し、長い間、Mac の Safari または IE6 (クライアントが使用) でページを表示するのに問題はありませんでした。

その後、Safari を 4.0.5 から更新したところ、突然、ページ要素が最初に間違った位置に表示されるようになりました。最初のページは問題ありませんが、[次へ] をクリックすると、レイアウトの右側に配置された画像が最初はかなり右側にずれて表示され、画像の大部分を切り取った Div の外側に表示されます。ただし、ウィンドウのサイズを変更するとすぐに、画像が正しい位置にジャンプします。たとえば、ページ 2 からページ 3 をクリックしてから、もう一度クリックしてページ 2 に戻ると、画像がキャッシュされ、正しく表示されます。

一部の Mac では Safari を痛烈にダウングレードし、他の Mac ではアップデートで修正されることを期待して懸命に取り組みました。興味深いことに、Safari 6 を実行している新しい Mac Pro ではすべてがうまく機能します。ページは常に IE6 で正常に表示されます。Safari 5.1.7 を実行している私の MacBook Pro では、常に画像がオフセットされます。

ブラウザの問題ではないと思いますが、私のコードの一部はあまり堅牢ではなく、一部のブラウザはコードを希望どおりに解釈しません。

マルチ div ページと同じですが、「ページ」が 1 つしか含まれていない新しい html ファイルを作成しました。Safari 5.1.7で表示するたびにレイアウトがしっかりしているので、要素の位置を定義するのは私のhtml / CSSではないと思います。以下は、単一の「ページ」を含む典型的な Div です。

<!-- Page 1 -->
<div class="showDiv clear" id="page1">

    <div id="bgPic-components">

        <!-- Sub-Heading -->
        <h1>Sub-Heading</span></h1>

        <!-- Page Content Area -->
        <div class="contentTextArea fullWidth">

            <div style="position:absolute; width:280px; z-index:2;">
                <p>Some body text here.</p>
            </div>

            <table style="position:absolute; right:40px; bottom:40px; z-index:0;">
                <tr><td>
                    <img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
                    <p class="padCaption">Annotation</p>
                </td></tr>
            </table>

            <table style="position:absolute; bottom:24px; z-index:0;">
            <tr><td>
                <img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
                <p class="padCaption">Annotation</p>
            </td></tr>
        </table>

        </div>

    </div>

</div>

問題を絞り込んで見つけるのに役立つ提案があれば、非常に感謝しています。

よろしく

クリス

4

0 に答える 0