次のコードが 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 */
}