绝对定位在Firefox与Chrome上 [英] Absolute positioning on Firefox vs. Chrome

问题描述

我在使用jQuery创建菜单时遇到了问题，我已经简化了下面的问题。此示例代码在Firefox和Chrome中呈现的方式不同：

HTML：

 < table id =topTable> 
< tr> 
< td> 
< div id =outer> 
 OuterDiv 
< div id =inner> 
 InnerDiv 
< / div> 
< / div> 
< / td> 
< / tr> 
< / table> 
  

CSS：

  #topTable {
 position：absolute; 
 top：50px; 
} 
 
 #outer {
 background-color：Red; 
} 
 
 #inner {
 background-color：Blue; 
 position：absolute; 
 top：0px; 
 left：100px; 
 
 
 
 
 
 
在Firefox中，outer元素在页面下方出现50px，但是inner元素位于页面的顶部。在Chrome中，内部div略高于50px，但不在页面顶部附近。有人能解释为什么我看到这种不同的行为？我注意到，在outer元素中添加position：absolute会导致样本在每个浏览器上都呈现相同的样子，但这会弄乱我的实际菜单代码的样式。如果我能理解这里发生了什么，我可以弄清楚我需要采取什么方向来修复我的真实代码。任何想法？
 
解决方案添加 position：relative;  / p> 
 
 
  #outer {
 background-color：Red; 
 position：relative; 
} 
  
请参阅： http://jsfiddle.net/5XWcD/1/ ，我在FF6.02和chrome 11.0中测试过了 
I am having a problem creating a menu using jQuery that I have boiled down to the issue below. This sample code renders differently in Firefox and Chrome:

HTML:
<table id="topTable">
    <tr>
        <td>
            <div id="outer">
                OuterDiv
                <div id="inner">
                    InnerDiv
                </div>
            </div>
        </td>
    </tr>
</table>
CSS:
#topTable {
    position: absolute;
    top: 50px;
}

#outer {
    background-color: Red;
}

#inner {
    background-color: Blue;
    position: absolute;
    top: 0px;
    left: 100px;
}
In Firefox, the "outer" element appears 50px down the page, but the "inner" element is at the very top of the page. In Chrome, the "inner" div is slightly above 50px, but nowhere near the top of the page. Can someone explain why I'm seeing this different behavior? I noticed that adding "position: absolute" to the "outer" element causes the sample to render the same on each browser, but that messes up the styling on my actual menu code. If I could understand what's going on here, I can figure out what direction I need to take to fix my real code. Any ideas?
解决方案
add position:relative; for #outer
#outer {
    background-color: Red;
    position:relative;
}
see : http://jsfiddle.net/5XWcD/1/, I tested in FF6.02 and chrome 11.0

                        
这篇关于绝对定位在Firefox与Chrome上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！