为 IE8 修复 HTML5答案

【问题标题】：Fixing HTML5 for IE8为 IE8 修复 HTML5
【发布时间】：2012-10-22 09:34:38
【问题描述】：

我似乎无法弄清楚为什么以下代码在 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 */
}

【问题讨论】：

有什么问题？ IE8 怎么不行？
CSS 无法正常工作。所有项目都在屏幕上，但显示不正确。域名是 orlandocakeballs.com
你真的应该改进你的问题！你看重什么结果？你在 IE8 中得到了什么？提供一个小提琴等等......
抱歉没有详细说明。这是我在网站上的第一个问题，我认为当使用 IE 打开网站时问题会很明显。

标签： css html google-chrome internet-explorer-8 web

【解决方案1】：

background-size css 样式（在您的正文样式中）是 CSS3 中的新样式，在 IE8 或更低版本中不受支持。见http://www.quirksmode.org/css/contents.html#t45。

【讨论】：

最好的解决办法是什么？
或许，最好的解决办法是使用图像编辑器来调整图像大小而不是 css。

【解决方案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 来执行此操作以及更多功能。

【讨论】：

【解决方案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>

【讨论】：