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

Posted 2023-02-16

【中文标题】只有 Internet Explorer 显示 1px 不需要的空间

【英文标题】：Only Internet Explorer shows 1px unwanted space

【发布时间】：2015-03-17 20:00:11

【问题描述】：

在 IE 中打开网站时，页脚下方有 1px 的多余空间。 Chrome 和 Firefox 显示正确（这意味着 margin-bottom: 0）。

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

我想知道为什么会这样。

* 
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;

<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>

【参考方案1】：

确保您也设置了正文的属性。所以

bodymargin:0;padding:0;width:100vw;height:100vh;

IE 是令人讨厌的浏览器，不幸的是很多人仍在使用，但每个浏览器中的正文通常都需要这样设置。