Microsoft Edge 和 IE 摆脱了页面底部固定页脚的空间

Question

IE 上的问题图片

应该是什么样子（Chrome）

我正在为一个学校项目创建一个网站，目前最多 浏览器测试。所有其他浏览器； Chrome、Firefox、Safari 都有 没有问题。但是，IE已经摆脱了我固定的空间 页面底部的页脚。我尝试添加一个边距底部 主 div 但没有任何反应。有谁知道如何解决这个问题？

这是我网站的代码 CSS

/*** Mobile View Styling **/
@media screen and (min-width: 0px) {
/** Stops page from being so small it is unreadable **/

html, body {
	min-width: 300px;
}

body{
    margin: 0px;
}

/** Table for Enduro, DH, Jump and XC page **/

th,td {
    border: 2px solid black;
    font-family: 'Roboto', sans-serif;
}

table {
    width: 60%;
    margin: 0 auto;
}

/* Aligns text to the center below image on each page **/

.yeti {
    text-align: center;
}

/** Fonts **/

p {
    font-family: 'Roboto', sans-serif; 
    }
        
h1, nav, h2, h3 {
    font-family: 'Roboto Condensed', sans-serif;
}

/** Image, caption and logo styling **/
figure {
    margin-top: 0em;
    margin-bottom: oem;
    margin-left: 0px;
    margin-right: 0px;   
    }
img {
    width: 80vw;
    display: block;
    margin: 0 auto;
    transition: All 0.7s ease;
    -webkit-transition: All 0.7s ease;
}

figcaption {
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 2px;
}

img.hover:hover {
    border-radius: 33%;
    filter: sepia(30%);
}

#logo {
    width: 100%;
    margin: 0 auto;
    }
    
/** Nav styling **/
    
 nav {
    list-style-type: none;
    width: 100%;
    display: none;
    position: static;
    margin-top: 30px;
    }
    
/** Active class added to current page, easier for user **/
    
.active {
     background: black;
     color: red;
}

/** Hamburger menu comes down when button is clicked **/

.hamburger{
  	background:none;
  	top:220px;
  	right: 35%;
  	text-align: center;
  	line-height:45px;
  	padding:5px 15px 0px 15px;
  	color:black;
  	border:0;
  	font-size:1.4em;
  	font-weight:bold;
  	cursor:pointer;
  	outline:none;
  	z-index:10000000000000;
  }
  
nav.clicked {
  	display: block;
}

nav a {
    text-decoration: none;
    width: 80%;
    font-size: 30px;
    margin-top: 10px;
    border: 2px solid black;
    border-radius: 20px;
    padding: 5px;
    background: rgb(227,37,37);
    color: black;
    display: block;
    text-align: center; 
    }
    
nav a:hover {
    color: red;
    background: black;
    -webkit-transition: All 0.5s ease;
    transition: All 0.5s ease;
  
}

/** Header, main content and footer **/
header {
    background: rgba(150,150,150,1);
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    align-items: center;
    padding-bottom: 15px;
}

footer {
    position: relative;
    bottom: 0px;
    background: rgb(150,150,150);
    text-align: center;
    width: 100%;
    height: 50px;
    margin-bottom: 0px;
    padding-top: 5px;
}

div#main {
    width: 90%;
    margin: 0 auto;
    display: block;
    border: 2px solid black;
    padding: 0px 5px 5px 5px;
    background: rgb(227,37,37);
    margin-bottom: 10px;
}

/** Video styling **/
.center {
    width: 290px;
    height: 225px;
    margin: 0 auto;
    display: block;
}
 }
/** Tablet View **/

@media screen and (min-width: 480px) {


/** Hides the menu button **/
	.hamburger {
		display: none;
	}

/** Header and Nav styling **/

	#logo {
    	width: 30%;
    	display: inline;
    	position: relative;
    	max-height: 130px;
    	max-width: 405px;
	}

	nav {
    	top: -7px;
    	left: 27%;
    	position: fixed;
    	width: 90%;
    	margin: 0 auto;
    	list-style-type: none;
    	align-self: center;
    	display: inline;
	}

	nav a {
    	display: inline;
    	text-decoration: none;
    	margin-right: 2vw;
    	font-size: 1.6vw;
    	margin-top: 10px;
    	border: 2px solid black;
    	border-radius: 20px;
    	padding: 5px;
    	color: black;
    	width: 10%;
	}
	header {
    	background: rgba(150,150,150,1);
    	position: fixed;
    	width: 100%;
    	z-index: 100;
    	top: 0px;
    	text-align: left;
    	align-items: inherit;
	}

	header h1 {
    	text-align: center;
    	margin-top: -10px;
    	font-size: 5vw;
    	opacity: 1;
    	display: block;
    	height: auto;
	}

	div#main {
    	margin: 0 auto;
    	width: 80%;
    	background: white;
    	display: block;
    	border: 2px solid black;
    	position: relative;
    	margin-top: 220px;
    	z-index: 80;
    	margin-bottom: 20px;
    	padding: 0px 5px 5px 5px;
    	background: rgb(227,37,37);
	}

/** Image and Video styling **/

	img {
        width: 80%;
	}
	.center {
    	width: 75%;
    	height: 56.25%;
    	margin: 0 auto;
    	display: block;
      z-index: 1000000000000;
	}

/** Footer **/
	footer {
    	position: relative;
    	bottom: 0px;
    	background: rgb(150,150,150);
    	padding-top: 10px;
      padding-bottom: 5px;
    	text-align: center;
    	width: 100%;
    	height: 50px;
    	margin-bottom: 0px;
	}

/** Makes the header h1 disappear after scrolling a certain distance **/
	.h1gone  {
        margin-top: -80px;
        opacity: 1;
        display: none;
        margin-bottom: 30px;
        transition: opacity 0s, display 0s;
	}

/** Makes the header's background transparent after scrolling a certain distance **/
	.scrolled {
        background: rgba(150,150,150,0.8);
        transition: background 2s;
	}
 }
 
/** Desktop View **/ 
 
 
@media screen and (min-width: 768px) {

/** Stops the header h1 from disappearing **/

	.h1gone {
		opacity: 1;
		display: block;
		margin-top: -20px; 
	}

/** Stops the background from overlapping with the already transparent background **/
	.scrolled {
		background: rgba(150,150,150,0);
	}
/** Image and Video styling **/
	img {
        width: 50vw;
   	}
   	
   	.center {
      	width: 90%;
    }
/** Nav and header styling **/
   	nav {
    	position: relative;
    	left: 0px;
    	top: 20vw;
    	margin-left: 3.5%;
   	}
   	
   	nav a {
    	font-size: 20px;
    	display: block;
    	width: 15vw;
   	}
   	
	header {
    	background: rgba(150,150,150,0);
    	margin-bottom: 20px;
    	position: relative;
   		text-align: center;
    	align-items: center;
    	margin-top: 0px;
    	height: 20vh;
    }
    
	header h1 {
    	text-align: center;
    	margin-top: -20px;
    	margin-bottom: 30px;
	}

    #mainhead {
    	background: rgba(150,150,150,0.8);
    	position: fixed;
    	width: 100%;
    	height: auto;
    	z-index: 1000000;
	}
/** Main content and footer styling **/
   div#main {
    	position: absolute;
    	width: 65%;
    	margin-left: 30%;
    	margin-top: 35px;
    	top: 20vw;
    	margin-bottom: 60px;
   }

	footer {
        position: fixed;
        bottom: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        z-index: 10000;
        background: rgba(150,150,150,0.8);
	}

}

<html class="gr__computing_tbc_school_nz"><!-- Links stylesheet, fonts, scripts and sets the viewport --><head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
      <link href="../styles/styles.css" rel="stylesheet" type="text/css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
      <script src="../scripts/overlay.js"></script>
      <title>Crankworx Equiptment in Use - Kye</title>
   </head>
   <!-- Start of body -->
   <body data-gr-c-s-loaded="true">
      <!-- Header and Nav (Hamburger button aswell)-->
      <header class="scrolled">
         <div id="mainhead">
            <img id="logo" src="../images/Crankworxlogo.png">                 
            <h1 class="title h1gone">Types of Equiptment in Use at Crankworx</h1>
            <button class="hamburger" onclick="changeClass()">Menu  ☰</button>
         </div>
         <div class="menu">
            <nav>
               <!-- Nav, php added to determine current page -->
               <ul class="nav">
                  <a class="" href="../webpages/index.php">Home</a>
                  <a class="active " href="../webpages/bikeTypes.php">Bike Types</a>
                  <a class="" href="../webpages/enduro.php">Enduro</a>
                  <a class="" href="../webpages/jump.php">Jump</a>
                  <a class="" href="../webpages/downhill.php">Downhill</a>
                  <a class="" href="../webpages/xc.php">Cross Country</a>
               </ul>
            </nav>
         </div>
      </header>
      <div class="clearfix"></div>
      <!-- Opening tag for main content -->
      <div id="main"><!-- Start of main content -->
<h1>Different Types of Bikes in Use</h1>
<p>There were many different bikes being used at Crankworx Rotorua; Enduro, Jump/Slopestyle, Downhill and Cross Country.
   The day we were there Jump/Slopestyle and Downhill bikes were being used.
</p>
<!-- Video of equiptment in use -->
<p>Here is a video of them in use;</p>
<div id="overlay" class="hidden"></div>
<video onmouseover="showOverlay();" onmouseout="hideOverlay();" class="center" width="640" height="420" controls="">
   <source src="../video/equipinuse.mp4" type="video/mp4">
   <source src="../video/equipinuse.ogg" type="video/ogg">
   <source src="../video/equipinuse.webm" type="video/webm">
   Sorry... Your browser does not support HTML5 video!
</video>
<!-- List of the different bikes at crankworx -->
<h2>Enduro Bike;</h2>
<figure>
  <img class="hover" src="../images/Commencal Meta.jpg">
  <figcaption>Image taken by myself</figcaption>
</figure>
<p> Enduro bikes are full suspension with reasonibly high travel forks and shocks.
   The high-end bikes usually have carbon frames.The price for a mid range enduro bike is $3000-$5500.
   The high-end bikes can cost more than $10,000. These were used at the Enduro World Series Giant Toa Enduro the weekend before.
</p>
<h2>Jump/Slopestyle Bikes;</h2>
<figure>
  <img src="../images/JumpCommons.jpg" class="hover">
  <figcaption>Image source: <a href="https://commons.wikimedia.org/wiki/File:Dirtbike_on_sylt.jpg">Link</a></figcaption>
</figure>

<p>Jump/Slopestyle Bikes are hardtail (only front suspension) bikes that are designed to move around easily in the air.
   The handlebars are made to be spun 360 degrees for barspins. There are also crank stoppers to stop them from moving in the air.
   This makes it easier for the rider to land back on the peddles after doing a trick.
   Jump Bikes are probably the cheapest bike to buy as they require the minimum amount of parts. They can cost from $400 - $2000.
   These were used in the Dual Speed and Style and the main even Slopestyle in memory of McGazza.
</p>
<h2>Downhill Bikes;</h2>
<figure>
  <img src="../images/Yeti Downhill Bike.jpg" class="hover">
  <figcaption>Image taken by myself</figcaption>
</figure>
<p>Downhill bikes are made especially for going downhill, what a surprise! They are made to tackle super rooty and bumpy parts of trail and also hit massive jumps. They are full suspension and usually have around 200mm of travel on the forks and rear shock.
   They can pretty much roll over anything. Downhill bikes cost anything from $1800 to $9000. These were used in the Crankworx Rotorua Air DH.
</p>
<h2>Cross Country bikes;</h2>
<figure>
  <img src="../images/XCCom.jpg" class="hover">
  <figcaption>Image source: <a href="https://commons.wikimedia.org/wiki/File:Pinarello_Dogma_XC_Shimano_XTR_Custom_Bike_(16165258647).jpg">Link</a></figcaption>
</figure>
<p>Cross Country bikes are designed to go up and down hills, mainly to go fast up hills. They have one front fork with around 100mm of travel. An entry level XC bike costs around $1500 the high-end ones can cost $10000, these are usually full carbon. These were used in the National Schools XC champs.</p>
<!-- End of main content -->
<!-- Adds the footer and closing tags to page -->
</div>
<!-- Closing tag for main content -->
<footer>
   <p>© Crankworx Rotorua website designed by Kye Oldham sites in 2017</p>
</footer>

<!-- Scripts for hamburger menu, transparent nav and disapearing h1 when scrolling -->
<!-- JQuery for hamburger button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
   function changeClass()
   {
   $('nav').toggleClass('clicked');
   
   
                                                          
   }
   $(function() {
   var header = $("header");
   var h1 = $("h1.title");
   $(window).scroll(function() {
   var scroll = $(window).scrollTop();
   
   if (scroll >= 200) {
      header.addClass("scrolled");
      h1.addClass("h1gone");
   } else {
      header.removeClass("scrolled");
      h1.removeClass("h1gone");
   }
   });
   });
   
</script>


<!-- End of whole webpage--></body></html>

提前致谢！

Answer 1

使用这个：设置默认浏览器边距

body {    
    margin: 0 !important;
    padding: 0 !important;
}

或

*{ margin:0; padding:0; box-sizing:border-box; } 如果你想要一些不那么 * 全局的东西：

示例：

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

或

所有 W3C HTML 规范和供应商默认 CSS 的 GitHub 存储库 可以找到样式表 here

1。 Default Styles for Firefox

2。 Default Styles for Internet Explorer

3。 Default Styles for Chrome / Webkit

4。 Default Styles for Opera

5。 Default Styles for HTML4 (W3C spec)

6。 Default Styles for HTML5 (W3C spec)

示例，根据默认的 W3C HTML4 规范：

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}