網頁，IE和Chrome結尾的空白區域顯示在不同的位置？

嘿，我在這裏發佈了一個問題：Why am I getting white space between my HTML element?已經解決了。網頁，IE和Chrome結尾的空白區域顯示在不同的位置？

我繼續工作的這個網頁上，並結束了以下內容：

IE截圖：

Chrome的截圖：

我真的想要的基本上是鉻的屏幕截圖，但沒有在我的紅色頁腳下方的空白處。我能做些什麼來爲IE和Chrome獲得理想的效果？

我的HTML文件是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="swaggersstyle.css"> 
     <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title> 

</head> 


<body> 
    <img src="final.jpg" id="banner"></img> 
    <ul id="nav"> 
     <li class="links"><a href="index.html">Home</a></li> 
     <li class="links"><a href="planning.html">Planning</a></li> 
     <li class="links"><a href="construction.html">Construction</a></li> 
     <li class="links"><a href="evaluation.html">Evaluation</a></li> 
    </ul> 


<div id="mainc"> 
    <p>Make Yourself at Home</p> 
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p> 
</div> 

<div id="rightcolumn"> 
<p>hghadgadgadg</p> 
<p>easfasf</p> 
<p>safSFS</p> 
<p>afafafadf</p> 
<p>safasf</p> 
<p>saasfasf</p> 
<p>fasfsaf</p> 
</div> 

<div id ="footer"> 
<p> fsafasfasf </p> 
</div> 

</body> 
</html>

和我的CSS文件是：

html{ 
    font-family: sans-serif; 
    background-color:#464E54; 
} 

body{ 
    width: 960px; 
    margin: auto; 
    background-color: white; 
    border: 5px solid black; 
} 

#banner{ 
    padding: 0px; 
    margin: 0; 
    display: block; 
} 

#nav { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 

} 

#mainc { 
    float: left; 
    width: 760px; 
    background-color: white; 
    margin: 0; 
} 

#rightcolumn { 
    padding-left: 3px; 
    float: left; 
    background-color: #dad8bf; 
    width: 197px; 
} 

#footer { 
    clear: both; 
    background-color: red; 
} 

.links { 
    float: left; 
    margin: 0px; 
} 

a:link { 

    display: block; 
    width: 232px; 
    font-weight: bold; 
    color: #444444; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 

a:visited { 

    display: block; 
    width: 232px; 
    font-weight: bold; 
    color: #444444; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 


a:hover { 
    background-color: #999999; 
} 

a:active{ 
    background-color: #999999; 
}

再次歡呼大家的幫助 - 在此之後希望我會有點這些神祕的白色更熟悉線出現。

來源

2011-09-18 AndyNZ

，只能通過進口和使用CSS Reset添加以下規則

div#footer p { 
    margin:0; 
}

來源

2011-09-18 12:23:03 Ehtesham

嗯我補充說，並保存，似乎沒有在任何瀏覽器的任何變化 - 它可能是填充不同的元素？歡呼的答覆。 – AndyNZ

你檢查了小提琴嗎？白色空間不顯示在那裏。 – Ehtesham

是的多數民衆贊成奇怪我不明白爲什麼它不顯示在我的網頁上，當我添加填充= 0;財產...嗯 – AndyNZ

許多問題都解決了。你爲什麼不使用它們？

理論：瀏覽器在HTML元素上應用了一些默認樣式，它們在那裏不一樣。例如，IE可能會將15px保證金添加到p元素，而Chrome可能會添加13px。這意味着跨瀏覽器的HTML元素的默認樣式之間可能存在風險。 CSS重置在技術上是一組CSS規則，可以將這些默認值歸零。例如，您可以看到在CSS重置時，p被指示具有0餘量。

p 
{ 
    margin: 0; 
}

來源

2011-09-18 12:41:22

通過右鍵單擊在鉻上使用檢查元素。你會發現該區域是藍色的移動鼠標在尊重的地區，然後你可以解決問題

你在不同的鉻瀏覽器（從不同的PC鉻瀏覽器）檢查它，或者你有任何下載管理器擴展安裝在瀏覽器上，如果是的話;然後先禁用它，然後重新加載您的頁面。

希望這對你有用。

來源

2012-07-13 17:24:42 Bonapart

網頁，IE和Chrome結尾的空白區域顯示在不同的位置？

回答

相關問題