Question

我正在整理另一位开发人员的工作，他似乎对CSS做了一些粗制滥造的工作。

页面上有主要的“包装”div，里面是导航的徽标和图像。图像使用“position：absolute”并使用CSS“top”属性来抵消它们。然而，Firefox和IE似乎从不同的角度开始偏移，这意味着徽标大约比IE应该高出100px。

这是一个IE CSS错误还是已知的东西？

有问题的示例：http://barry.cityjoin.com/mccamb/

Answer 1

如果要使用top，right，bottom和/或left将元素绝对放置在包装器中，则必须将包装器的位置显式设置为相对位置。否则，绝对元素将定位在视口内。

一个小小的工作示例：

<style>
    .wrapper
    {
        position: relative;
        height: 100px;
        width: 800px;
    }
    .absoluteLogo
    {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 60px;
        width: 80px;
    }
    .absoluteElement
    {
        position: absolute;
        top: 80px;
        left: 320px;
        height: 20px;
        width: 80px;
    }
</style>

<div class="wrapper">
    <div class="absoluteLogo">Logo</div>
    <div class="absoluteElement">Element</div>
</div>

另一种可能性是使用边距来定位绝对元素：

<style>
    .wrapper
    {
        height: 100px;
        width: 800px;
    }
    .absoluteLogo
    {
        position: absolute;
        margin: 10px 0 0 10px;
        height: 60px;
        width: 80px;
    }
    .absoluteElement
    {
        position: absolute;
        margin: 80px 0 0 320px;
        height: 20px;
        width: 80px;
    }
</style>

<div class="wrapper">
    <div class="absoluteLogo">Logo</div>
    <div class="absoluteElement">Element</div>
</div>

结果相同，应该适用于所有浏览器。

IE7 - 绝对定位偏移与Firefox不同？

1 个答案: