Question

我似乎无法弄清楚为什么以下代码在IE8中无法正常运行，但在Chrome中运行良好。请告知代码中的任何错误，或者如果有解决方法，我可以快速实施。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta name="description" content="Orlando Cake Balls">
    <meta name="keywords" content="Cake Balls,Cakes Balls,Cake Balls Cake,Orlando Cakes,Cake Pops Recipes,What is a Cake Pop,What is a Cake Ball,Cake,Ball,Cakes,Balls,Orlando,Pops,Recipes,What">
    <meta name="author" content="Joe Quinn">
    <meta charset="utf-8" />
    <title>ORL Cake Balls</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />    
        <!--Google Analytics-->
        <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-36012302-1']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
</head>
<body>

    <div id="emailcontainer">
        <a href="mailto:info@orlandocakeballs.com" title="Contact Us" class="emaillink"></a>

        <div id="socialmedia">
            <div id="twitter">
                <a href="https://twitter.com/ORLCakeBalls/" target="_blank" data-show-count="false"><img src="../twitter-logo.jpg" width="25" height="25" alt="Twitter Link" /></a>
           <!--     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>  -->
            </div>
            <a href="http://www.facebook.com/OrlandoCakeBalls/" target="_blank" id="facebook" title="Like Us"><img src="../facebook-logo.jpg" width="25" height="25" alt="Facebook Link" /></a>
            <a href="http://pinterest.com/orlcakeballs/" target="_blank" id="pinterest" title="Pin Us"><img src="../pinterest-logo.jpg" width="25" height="25" alt="pinterest Link" /></a>
        </div>
    </div>
<footer id="copyright">
© 2012 Orlando Cake Balls. All rights reserved.
</footer>

</body>

body {
background: #fff url(../landingpage.jpg) no-repeat top center;
background-size: auto 900px;
}
#emaillink {
text-decoration: none;
}
#copyright {
padding: 830px 0px 10px 0px;
text-align: center;
color: #fff;
font-family: Arial;
}

.emaillink {
position: absolute; 
top: 400px; 
left: 695px; 
width: 290px; 
height: 50px; 
background-color: transparent; 
border: 1px solid #fff; 
}

.emaillink:hover {
position: absolute; 
top: 400px; 
left: 695px; 
width: 290px; 
height: 50px; 
background-color: transparent; 
border-bottom: 1px solid #00BFFF; 
}
#emailcontainer {
width: 900px;
margin: 0 auto;
position: relative;
}
#twitter {
position: absolute; 
top: 470px; 
left: 720px; 
/*background-color: transparent; 
border: 1px solid #fff; */
}
#twitter:hover {
opacity: 0.4;
filter: alpha (opacity=40); /* For IE8 and earlier */
}

#facebook {
position: absolute; 
top: 470px; 
left: 755px; 
background-color: transparent; 
border: 1px solid #fff; 
}
#facebook:hover {
opacity: 0.4;
filter: alpha (opacity=40); /* For IE8 and earlier */
}

#pinterest {
position: absolute; 
top: 470px; 
left: 790px; 
background-color: transparent; 
border: 1px solid #fff; 
}
#pinterest:hover {
opacity: 0.4;
filter: alpha (opacity=40); /* For IE8 and earlier */
}

Answer 1

background-size css样式（在你的体型中）是CSS3中的新功能，在IE8或更低版本中不受支持。请参阅http://www.quirksmode.org/css/contents.html#t45。

Answer 2

您应该考虑将display: block添加到footer元素。

但是当浏览器遇到无法识别的元素时会发生什么？我们无法确定。它可能没有造型，它可能会继承一些默认样式，它可能根本不会显示。因此，我们确保我们考虑任何和我们自己的CSS中所有新元素的样式。没有假设。

来源：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/

您可以使用HTML5 reset stylesheet执行此操作以及更多内容。

Answer 3

<script type="text/javascript">
 document.createElement('header');
 document.createElement('nav');
 document.createElement('menu');
 document.createElement('section');
 document.createElement('article');
 document.createElement('aside');
 document.createElement('footer');
</script>

修复IE5的HTML5

3 个答案: