ウェブサイトを作り始めていますが、IE以外のすべてのブラウザで閲覧できるようです。私はなぜこれが起こっているのかについて混乱しています、そして私の問題へのどんな洞察も大いに感謝されるでしょう。
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/stickyFooter.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="header"></div>
<div id="banner"></div>
<div id="nameplate"></div>
<div id="whiteLine"></div>
</header>
<div id="body">body</div>
<div class="push"></div>
</div>
<footer>footer</footer>
</body>
</html>
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
background: url(../image/core/background.jpg) repeat-x center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
header div#header {
background: url(../image/core/header.png) repeat-x;
height: 61px;
}
header div#banner {
background: url(../image/banner/01.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
}
header div#nameplate {
background: url(../image/core/nameplate.png) no-repeat;
height: 140px;
width: 1000px;
margin: -340px auto 0 auto;
}
header div#whiteLine {
background: url(../image/core/stripe.png) repeat-x;
height: 1px;
margin: 200px 0 0 0;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -61px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 61px; /* .push must be the same height as .footer */
}
footer {
background-color: red;
}