瀏覽器之間相對框的絕對位置最大不同

我有一個子導航，它位於不同瀏覽器的兩個不同位置，我不確定原因。我意識到使用margin-top而不是top可以解決這個問題，但問題是當子導航出來時我有一個jQuery幻燈片動畫，並且在我使用margin-top時它看起來不太好比現在更進一步。這裏是差的圖片：瀏覽器之間相對框的絕對位置最大不同

http://jsfiddle.net/eAqev/ < - JS小提琴

The difference between Internet Explorer and Google Chrome

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; 
}

來源

2012-11-07 Luke Turnbull

什麼提琴？哪些瀏覽器可以正常工作，哪些瀏覽器無法正常工作？ – falsarella

http://jsfiddle.net/eAqev/和Internet Explorer + Firefox似乎是相同的，Chrome是不同的。不知道其他人〜 –

Demo

嗨現在定義ID#navigation uldisplay:inline-block;比adjects您ID#navigation ul ul在top

作爲這樣

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

Live demo

來源

2012-11-07 11:59:46

這工作！非常感謝Rohit。爲什麼這會影響它，我可以問一下嗎？ –

@LukeTurnbull現在更多關於內嵌或內聯塊的信息，請訪問http://dustwell.com/div-span-inline-block.html –

不同的瀏覽器有不同的默認保證金&填充ul/li元素。你有沒有嘗試將這些重置爲0？

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

來源

2012-11-07 11:44:43

他們都已被重置在一開始的HTML重置 –

可能是你應該試試css-reset？把它放在你的css開頭但它可能會混亂佈局，所以你需要自己設置一些值。

來源

2012-11-07 11:46:32 JAre

我已經有一個CSS重置我很害怕！ –

你讓一切都清楚只需添加下面codes.It將解決您的問題

#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 +會很好。

來源

2012-11-07 11:47:45

我已經擊退了這個，但它仍然是不同的瀏覽器！〜不知道有什麼不對，說實話 –

嘗試更新的答案@LukeTurnbull –

不要用！重要的是牀的做法... –

試試這個：

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

來源

2012-11-07 11:53:52 Gopikrishna

瀏覽器之間相對框的絕對位置最大不同

回答

相關問題