Question

在IE中打开网站时，页脚下方有1个不需要的空间。 Chrome和Firefox正确显示我想要的（这意味着margin-bottom：0）。

悬停导航项时出现相同的错误。有1px的可见空间。再次，只有IE。

我想知道为什么会这样。

＆＃13;

* {
padding: 0;
margin: 0;
}

header {
background: brown;
height: 100px;
width: auto;
min-width: 1200px;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

h1 {
color: white;
font-family: calibri;
text-align: center;
padding-top: 25px;;
padding-left: 10px;
}


nav {

min-width: 1200px;

}

nav ul {
background: grey;
text-align: center;
-webkit-box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);



}

nav ul li {
list-style-type: none;
display: inline-block;
padding: 20px;


}

nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
font-family: verdana;

}

nav ul li:hover {
background: black;
cursor: pointer;
}

section {
background: darkblue;
height: 200px;
width: 500px;
margin-top: 20px;
margin-left: 15px;
}

article {
background: gold;
height: 800px;
width: 500px;
margin-top: 10px;
margin-left: 15px;
}

aside {
background: orange;
height: 1010px;
width: 600px;
float: right;
margin-top: -1010px;
margin-right: 20px;
}

div#content {
background: none;
width: 1200px;
margin: auto;
}

p {
text-align: center;

}

p#sider, #article, #section {
padding-top: 20px;
padding-left: 20px;
}

footer {
background: brown;
height: 40px;
width: auto;
margin-top: 20px;
margin-bottom: 0;
}

p#credits {
font-size: 15px;
font-family: verdana;
float: left;
margin-top: 10px;
margin-left: 15px;

}

p#logo {
font-size: 15px;
font-family: verdana;
float: right;
margin-top: 10px;
margin-right: 15px;

font-weight: bold;
}

#logoname {
heigh: 200px;
width: 200px;
margin: auto;
position: relative;
left: -40px;
top: -40px;


}

article, section, aside {
font-family: verdana;
font-size: 20px;
text-align: left;
}

＆＃13;

<header>
  <h1>Logo Picture</h1>
  <div id="logoname">
	<img src="http://www.ssbwiki.com/images/thumb/9/9a/DKSymbol%28preBrawl%29.png/50px-DKSymbol%28preBrawl%29.png">
  </div>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Reference</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div id="content">

<section>
<p> Hello there! This is a section and here it will be some pretty content about something pretty nice. </p>
</section>

<article>
<p> Hello again. This is an article about something new. What happened lately. You see?</p>
</article>

<aside>
<p id="sider">This is a sider. It is onn the left side of the website.
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website</p>
</aside>

</div>

<footer>
<p id="credits">Copyright 2015 | All rights reserved</p>
<p id="logo">Logo Name</p>


</footer>

＆＃13;

Answer 1

确保您也为身体设置属性。所以

body{margin:0;padding:0;width:100vw;height:100vh;}

IE浏览器是令人讨厌的浏览器，遗憾的是很多人仍在使用，但每个浏览器中的主体通常需要像这样设置。

只有Internet Explorer显示1px不需要的空间

1 个答案: