2

我有一个网页，其中包含几个包含单个“页面”的 Div。我定义了以下 CSS 样式：

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

.hideDiv{
    display:none;
}

.showDiv{
    display: inline;
}

一切正常，很长一段时间以来，我们在 Mac 上的 Safari 或 IE6（我们的客户使用）中查看我们的页面都没有问题。

然后我们从 4.0.5 更新了 Safari，我们突然发现页面元素最初出现的位置不正确。第一页还可以，但是当您单击“下一步”时，位于布局右侧的图像最初会明显向右偏移，大部分位于其包含的 Div 剪裁大部分图像之外。但是，一旦我调整窗口大小，图像就会跳到正确的位置。如果您从第 2 页单击到第 3 页，然后再次单击返回到第 2 页，则图像已被缓存，它可以正确显示。

我们在一些 Mac 上痛苦地降级了 Safari，并与其他人一起努力，希望更新能够修复它。奇怪的是，在我运行 Safari 6 的新 Mac Pro 上一切正常。页面在 IE6 中始终显示良好。我运行 Safari 5.1.7 的 MacBook Pro 总是偏移图像。

我不认为这是浏览器问题，而是我的代码区域不是很健壮，并且某些浏览器不会像我们想要的那样解释代码。

我创建了与多 div 页面相同但仅包含一个“页面”的新 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