不同浏览器中相对盒子的绝对定位顶部位置不同

Question

我有一个子导航，它在不同的浏览器上放置在两个不同的位置，我不确定为什么会这样。我意识到使用margin-top而不是top可以解决这个问题，但问题在于当子导航出现时，我使用了jQuery滑动动画，如果使用margin-top，它会比实际位置更高，看起来不太好看。这里是不同之处的图片：http://jsfiddle.net/eAqev/ <-- JS Fiddle HTML:

    <div id="navigation">
        <ul>
            <li><h1>01. About</h1><h2>Learn about us</h2></li>
            <li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
                <ul class="scrollDown">
                    <li><p>Kitchen Worktops</p></li>
                    <li><p>Upstands/Splashbacks</p></li>
                    <li><p>Gables/ Panels</p></li>
                    <li><p>Glass</p></li>
                    <li><p>High Gloss</p></li>
                    <li><p>Bathroom Tops</p></li>
                    <li><p>Sinks/ Taps</p></li>
                </ul>
            </li>
            <li><h1>03. Contact</h1><h2>Contact us!</h2></li>
            <li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
        </ul>
    </div>

CSS：

#navigation ul {
    display: inline;
    position: relative;
}

#navigation ul li {
    float: left;
    width: 200px;
    height: 35px;
    margin: 10px;
    list-style: none;
    border-bottom: 3px solid #ccc;
}

#navigation ul li:hover {
    border-bottom: 6px solid #eee;
    cursor: pointer;
}

#navigation ul ul {
    position: absolute;
    z-index: 1500;
    margin: 0;
    padding: 0;
    list-style:none;
    background: #fff;
    width: 200px;
    top: 60px;
    opacity:0.95;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
}

- Luke Turnbull

---

弄个小测试怎么样？哪些浏览器可以使用，哪些不行？ - falsarella

http://jsfiddle.net/eAqev/，Internet Explorer和Firefox看起来一样，而Chrome则不同。其他浏览器不确定~ - Luke Turnbull

Answer 1

你已经让事情变得清晰明了，只需添加以下代码即可解决问题。

    #navigation ul ul {
    position: absolute;
    z-index: 1500;
    margin: 0 !important;
    padding: 0 !important;
    list-style:none;
    background: #fff;
    width: 200px;
    top: 60px;
    opacity:0.95;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
     }  


      #navigation ul {
      display: inline;
      z-index:10;
       position: relative;
        }

很可能IE7会存在一些问题。这个功能在IE8+中将能够正常工作。

- Vivek Dragon

---

我已经放进去了，但在浏览器上仍然不同！~说实话我不确定出了什么问题。 - Luke Turnbull

Answer 2

演示

你现在需要定义你的ID为#navigation ul，并给它添加display:inline-block;，然后将你的#navigation ul ul的top属性调整一下。

就像这样：

    #navigation ul {
        display: inline-block;
        position: relative;
        vertical-align: top;
    }
 #navigation ul ul {
        top:48px;
    }

Live demo

- Rohit Azad Malik

---

这个已经起作用了！非常感谢Rohit。我可以问一下为什么会影响它吗？ - Luke Turnbull

@LukeTurnbull，现在更多关于inline或inline-block，请访问此网站http://dustwell.com/div-span-inline-block.html。 - Rohit Azad Malik

Answer 3

不同的浏览器在ul/li元素上有不同的默认边距和填充。您尝试过将它们全部重置为0吗？

#navigation ul, #navigation li {
    padding: 0px;
    margin: 0px;
}

- Ross McLellan

---

它们在开始时都被重置了，使用了 HTML 重置。 - Luke Turnbull

Answer 4

试试这个：

    #navigation ul li {float: left;
 width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}

- Gopikrishna

Answer 5

也许你应该尝试css-reset？只需将其放在你的CSS开头即可。但这可能会破坏布局，所以你需要自己设置一些值。

- JAre