html - Microsoft Edge 和 IE 去掉了页面底部固定页脚的空间

Question

IE 上的问题图片

它应该是什么样子(Chrome)

I am creating a website for a school project and am currently up to browser testing. All the other browsers; Chrome, Firefox, Safari have had no problems. But, IE has gotten rid of the space for my fixed footer at the bottom of page. I have tried adding a margin-bottom to the main div but nothing happens. Does anyone know how to fix this?

这是我网站的代码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

Used This: To Set Default Browser Margin Padding

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

或

* { margin :0；填充:0；框大小:边框框； 如果您想要的东西 * 全局性低于:

示例:

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

或

A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found 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 }
}