保證金崩潰導致Div移動。

我正在研究HTML，並且遇到了我認爲邊距崩潰的問題。當我取出「border：solid black 1px;」這一行時從我的CSS中的Div＃body中，它會導致Div #header在頁面上下降大約20％。我無法弄清楚爲什麼會這樣做，或者如何解決這個問題。我已經嘗試製作人體Div邊框0px，它做同樣的事情。如果我把屍體完全分開，它也會做同樣的事情。保證金崩潰導致Div移動。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Cast & Crew - Home Page</title> 
<style type="text/css"> 

</style> 
<link href="css2.css" type="text/css"       
       rel="stylesheet" /> 

</head> 

<body> 
<div id="body"> 
<div id ="header"> 
    <span class="float"><img class="img" src = "face2.png" alt="Face mask"></span> 
     Cast & Crew Restaurant 

    <span class="floatr"><img class="img" src = "face.png" alt="Face mask"></span> 


<table id="links"> 
<tr> 
    <th><a href="Home.html"> Home</a></th> 
    <th><a href="Menu.html"> Menu</a></th> 
    <th><a href="plabout.html">About Us</a></th> 
    <th><a href="Contact.html">Contact</a></th> 
</tr> 
</table> 
</div> 
<div class ="sidebar"> 
<table> 
    <tr><td><a href="#app">Appetizers</a></td></tr> 
    <tr><td><a href="#salad">Salads</a></td></tr> 
    <tr><td><a href="#burger">Burgers</a></td></tr> 
    <tr><td><a href="#sand">Sandwiches</a></td></tr> 
    <tr><td><a href="#pasta">Pasta</a></td></tr> 
    <tr><td><a href="#entree">Entrées</a></td></tr> 
    <tr><td><a href="#pizza">Pizza</a></td></tr> 

</table> 
</div> 
</div> 
</body> 
</html>

這裏是CSS代碼

a:link {color:#FFFFFF;} 
a:visited {color:#0066FF} 
a:hover {color:#3385FF;} 
a:focus {color:#B20000;} 
a:active {background-color: white; color:black;} 

.blankrow{height: 40px !important; 
    } 

#body {height: 1150px; width: 100%; 
    border:solid black 2px;} 


#header  {position: fixed; 
    background:black; 
    height: 160px;width: 100%; 
    text-align: center; 
     font-size:40pt; 
     text-shadow:5px 4px 10px #FF0000,-5px -4px 10px #FFFFFF; 
     color:#000000; 

     } 

html  {background-image: url("bg.jpg"); 
     background-repeat:no-repeat; 
     background-position; 50%, 50%; 
     background-attachment: fixed; 
     min-height:100%; 
     background-size:cover; 
     color:#FFFFFF; 
     } 

.img {width: 50px; height:85px;} 

#links {width:50%; 
    height:50px; 
    font-size:22pt;  
    margin:auto; 
    text-shadow:0px 0px 0px #000000; 
    } 

#menu {height: 3200px; 
    width: 900px; 

    margin-top:15%; 
    margin-left:17%; 
    font-size:18pt;} 

.sidebar {width: 150px; 
    height: 230px; 
    position: fixed; 
    left: 40px; 
    top: 300px; 
    font-size:18pt; 
    border:solid black 2px;} 

.spacer{height: 10px !important; }

來源

2014-04-05 Dajan Ra

這裏我就不http://jsfiddle.net/看到問題tilwinjoy/2MKfw /它的samwe有和無邊框...... –

當我把文件保存在記事本++和在Firefox，IE，Chrome或Safari瀏覽器中運行它，我得到我上面提到的問題。 –

你是否檢查了小提琴？它工作嗎？如果是的話，問題在別的地方......班級在哪裏浮動？你確定你分享了整個代碼嗎？如果您分享的代碼無法複製問題，我們該如何解決？ –

申請最高：對的#header 0將解決這個問題

來源

2015-05-04 19:06:06

保證金崩潰導致Div移動。

回答

相關問題