2011-01-27 54 views
1

在某些瀏覽器中,看起來相對於容納塊的底部定位的塊被關閉一個像素。絕對底部定位塊關閉一個像素?

WebKit瀏覽器(Safari和Chrome)在nav塊的底部和body塊之間使用一個像素間隙進行渲染。

是否有一種獨立於瀏覽器的方式讓底部定位的絕對塊以相同方式定位?

的標記:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <title>gap test</title> 
    <style type="text/css"> 
body { 
    margin: 0; 
} 

#header { 
    position: relative; 
} 

#logo { 
    background-color: #f88; 
    height: 100px; 
} 

#nav { 
    position: absolute; 
    bottom: 0px; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
} 

#nav li { 
    list-style-type: none; 
    display: inline; 
} 

#nav li a { 
    background-color: #ccf; 
    margin: 0 10px; 
    padding: 0 10px; 
    border: none; 
} 

#body { 
    background-color: #8f8; 
    height: 100px; 
} 
    </style> 
    </head> 

    <body> 
    <div id="header"> 
     <div id="logo"> 
     Logo. 
     </div> 
     <div id="nav"> 
     <ul> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
     </div> 
    </div> 
    <div id="body"> 
     Body. 
    </div> 
    </body> 
</html> 

回答

3

float: left添加到您的#nav li a css規則中,它將消除空間。您需要將左右邊距增加到15px才能獲得相同數量的空間。

0

似乎在我的Mac上所有的瀏覽器工作正常。這個問題可能是由於你有任何的JavaScript。

Screenshot

+0

有趣的是,它在Mac上不同。我嘗試在Windows上使用Chrome和Safari。 – 2011-01-27 18:30:40

0

可悲的是,你可能需要實施提供了對這個問題的答案之一:Is there any way to do "if IE" inside of a CSS file?

您可以在不同的瀏覽器來計數呈現的內容略有不同。所以,你幾乎總是需要抽出你不期望的CSS指令(不管它們是不是黑客)。

+0

處理IE怪異的好技術,似乎有很多。在我的情況下,IE *和* Firefox與WebKit不同,所以IE條件將無濟於事。 – 2011-01-27 18:25:41

+0

@Uh Clem:這適用於我知道的任何瀏覽器。 – 2011-01-28 02:47:01

相關問題