1px空間頂部的div，爲什麼？

在我繼續使用當前的導航欄之前，我需要找到一個解決方案來刪除嵌套div上方的1 px空間。1px空間頂部的div，爲什麼？

有什麼想法？順便說一下，當我在本地查看時，空間不在那裏，只有在通過服務器在線查看時才顯示空間。提前

謝謝:)

BTW沒有在HTML中的關閉第一個div，但由於某種原因，它沒有顯示在這裏。

鏈接：http://www.ravepreservationproject.com/test/index.htm

CSS：

body { 
margin:0; 
} 
body a { 
    text-decoration:none; 
} 

#header { 
width: 100%; 
position: absolute; 
bottom: 0; 
} 

#header-wrap { 
width: 100%; 
position: fixed; 
background-color: #ff9a2c; 
top:0; 
left:0; 
} 

#nav a {padding:11px 10px 12px 10px; font:300 18px 'roboto', sans-serif; float:left;} 
#nav a:link { color:#ffffff; background-color:#ff9a2c; } 
#nav a:visited { color:#ffffff; background-color:#ff9a2c; } 
#nav a:hover { color:#ffffff; background-color:#fff; } 
#nav a:active { color:#ffffff ; background-color:#ff9a2c; } 

#nav #purple:hover {background-color:#91008b;} 
#nav #blue:hover {background-color:#0200ac;} 
#nav #green:hover {background-color:#05bd08;} 
#nav #yellow:hover {background-color:#f6fc00;} 
#nav #red:hover {background-color:#f91d05;} 

#nav img {margin:auto; vertical-align:middle; display:inline-block; border:0;}

HTML：

<div id="header-wrap"> 
<div id="header" class="clear"> 
    <nav id="nav"> 
     <a id="purple" class="nav_hide" href="#">Home</a> 
     <a id="blue" class="nav_hide" href="#">About</a> 
     <a id="green" class="nav_hide" href="#">Curate</a> 
     <a id="red" class="nav_hide" href="#">Updates</a> 
     <a id="purple" class="nav_hide" href="#">Donors</a> 
     <a id="blue" class="nav_hide" href="#">Donate</a> 
     <a id="green" class="nav_hide" href="#">History</a> 
     <a id="red" class="nav_hide" href="#">Gallery</a> 

     <a id="red" style="float:right; padding:9px 10px 14px 10px;" href="#"><img src="../../../../wt-pinit.png" height="17" width="14"></a> 
     <a id="green" style="float:right; padding:9px 10px 14px 10px;" href="#"><img src="../../../../wt-facebook.png" height="17" width="8"></a> 
     <a id="blue" style="float:right; padding:9px 10px 14px 10px;" href="#"><img src="../../../../wt-twitter-comment.png" height="17" width="26"></a> 
     <a id="purple" style="float:right; padding:9px 10px 14px 10px;" href="#"><img src="../../../../wt-twitter-follow.png" height="17" width="26"></a>   
    </nav> 
</div>

來源

2014-11-06 matthew johnson

嘗試設置'body * {margin：0; padding：0} '或使用* reset.css * – pbaldauf 2014-11-06 10:02:24

你可以顯示你的問題的截圖嗎？ Chrome在我看來很好。 – Marwelln 2014-11-06 10:02:53

使用適當的重置CSS（Eric Meyer的一個，例如）。另請注意，您的HTML無效（不是唯一的ID）。 – enguerranws 2014-11-06 10:03:44

-1

爲了避免這種類型的問題......總是使用一個代碼，即* {margin:0; padding:0; border:0;}
這個代碼你在.css文件的頂部.css文件中使用。手段，在我的洋蔥總是開始寫這個代碼的.css文件它永遠不會在您的佈局創建一個問題... 謝謝你...

來源

2014-11-06 10:18:42

我試過所有的建議，但仍然有問題。看起來問題只在筆記本電腦上的Chrome上出現。 IE，FF，看起來不錯，我的桌面上的Chrome看起來不錯。奇怪的！以下是截圖 http://www.ravepreservationproject.com/test/derp.png – 2014-11-07 06:28:16

1px空間頂部的div，爲什麼？

回答

相關問題