Question

我有一个网页，其中包含几个包含各个“页面”的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总是会偏移图像。

我不相信这是一个浏览器问题，但我的代码区域不是很强大，而且有些浏览器不会像我们想要的那样解释代码。

我创建了新的html文件，这些文件与multi-div页面相同，但只包含一个“页面”。每次我在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>

如果有任何建议可以帮助我缩小范围并找到问题，我将非常感激。

此致

克里斯

元素错误地定位在页面上直到窗口调整大小

0 个答案: