Question

嘿我刚才在这里发了一个问题：Why am I getting white space between my HTML element?已经解决了。

我继续在此页面上工作，最终得到以下结论：

IE屏幕截图：

Chrome屏幕截图：

我真正想要的是基本上是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;
}

再一次为每个人的欢呼喝彩 - 希望在此之后我会对这些出现的神秘白线更加熟悉。

Answer 1

添加以下规则

 div#footer p {
     margin:0;
 }

Answer 2

通过右键单击在chrome上使用inspect元素。您可以通过将鼠标移动到受尊重的区域来找到蓝色区域，然后您就可以解决问题

您是否在不同的Chrome浏览器（来自不同的PC Chrome浏览器）上检查过它，或者您的浏览器是否安装了任何下载管理器扩展程序，如果是的话;然后先禁用它，然后重新加载页面。

希望这适合你。

Answer 3

只有导入和使用CSS Reset才能解决其中许多问题。你为什么不用它们？

理论：浏览器在HTML元素上应用了一些默认样式，它们并不相同。例如，IE可能会向15px元素添加p边距，而Chrome可能会添加13px。这意味着跨浏览器的HTML元素的默认样式之间可能存在不一致。 CSS Reset在技术上是一组CSS规则，它们将这些默认值清零。例如，您可以看到在CSS重置中，p被指示具有0页边距。

p
{
    margin: 0;
}

网页末尾的白色空间，IE和Chrome在不同的地方显示它？

3 个答案: