html - Content Box は IE9 で少しずれています...修正方法は?

Question

こんにちは！私はwww.thetotempole.caに Web サイトを持っていますが、IE9 で表示すると... 私の Web サイトのコンテンツボックス (コンテンツが入った緑色の木製の背景のボックス) が少し左に移動し、実際のコンテナーとコンテンツボックスの間にスペースができます。 ...とにかく、他のブラウザに害を与えることなくこれを修正できますか? ありがとう！

スクリーンショット:

ここに画像の説明を入力

HTML:

<!DOCTYPE html>
<head>
<title>The Totem Pole News - Movies</title>
    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-45342007-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>
<meta charset="utf-8">
<meta name="description" content="A totem pole themed news website posting articles on news, music, movies, video games, and health.">
<link href="thecss2.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/ico" href="images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8" />

</head>
<body>
<div id="container">
<div id="contentbox" align="Center">
<a href="index.html"><div id="banner" align="Center">
</div></a>
<div id="navbar">
  <p><a href="index.html"><img src="images/home.png" width="65" height="54" alt="picture of a house to relate to the home page (content)" style="position: absolute; left: 23px; top: 16px; width: 57px; height: 48px;"><span style="position: absolute; left: 24px; z-index:2; top: 71px; height: 23px;">Content</span></a>
    <a href="#"><img src="images/eagleicon.gif" width="73" height="39" alt="An Eagle icon for the News section of the Totem Pole" style="position: absolute; left: 111px; top: 28px;"><span style="position: absolute; z-index: 2; left: 127px; top: 72px;">News</span></a>
    <a href="#"><img src="images/owlicon.gif" width="81" height="61" alt="An Owl icon for the Music section of the totem pole" style="position: absolute; left: 210px; top: 11px;"><span style="position: absolute; z-index:2; left: 226px; top: 73px;"><strong>Music</strong></span></a><a href="movies.html"><img src="images/wolficon.gif" width="88" height="54" alt="A Wolf icon for the Movies section of the totem pole" style="position: absolute; left: 320px; top: 15px;"><span style="position: absolute; left: 336px; top: 72px; z-index:2;"><strong>Movies</strong></span></a>
    <a href="#"><img src="images/hareimage.gif" width="60" height="56" alt="A Hare icon for Video Game section of the Totem Pole" style="position: absolute; left: 441px; top: 13px;"><span style="position: absolute; z-index:2; left: 428px; top: 73px;"><strong>Video Games</strong></span></a>
    <a href="#"><img src="images/bearicon.gif" width="91" height="57" alt="A bear icon for the Health section of The Totem Pole" style="position: absolute; left: 551px; top: 13px;"><span style="position: absolute; left: 580px; top: 72px; z-index:2;">Health</span></a></p>
</div>
<!--Nav Bar 2-->
<div id="navbar2">
<a href="#">About Us</a> <a href="#">Feedback</a> <a href="#">Subscribe</a>
</div>
<!-- Atomz HTML for Search -->
<div id="searchbar">
<form method="get" action="http://search.atomz.com/search/">
  <input id="searchbox" size="13" name="sp_q" value="Search..." onFocus="if (this.value == 'Search...') {this.value=''}">
  <input class="css_btn_class" type="submit" value="Search">
  <input type="hidden" name="sp_a" value="sp1005092e">
  <input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>
</div>
    <!-- Start WOWSlider.com BODY section -->
    <div id="mywowslider">
    <div id="wowslider-container1">
    <div class="ws_images">
      <ul>
        <li><img src="images/anchor.jpg" alt="Ron Burgundy" title="Ron Burgundy" id="wows1_0"/>Played by Will Ferrell</li>
        <li><img src="images/anchor2.jpg" alt="Brian Fantana" title="Brian Fantana" id="wows1_1"/>Played by Paul Rudd</li>
        <li><img src="images/anchor3.jpg" alt="Brick Tamland" title="Brick Tamland" id="wows1_2"/>Played by Steve Carrell</li>
        <li><img src="images/anchor4.jpg" alt="Champ Kind" title="Champ Kind" id="wows1_3"/>Played by David Koechner</li>
        </ul>
    </div>
<div class="ws_bullets"><div>
  <a href="#" title="Ron Burgundy"><img src="images/anchor.jpg" alt="Ron Burgundy"/>1</a>
  <a href="#" title="Brian Fantana"><img src="images/anchor2.jpg" alt="Brian Fantana"/>2</a>
  <a href="#" title="Brick Tamland"><img src="images/anchor3.jpg" alt="Brick Tamland"/>3</a>
  <a href="#" title="Champ Kind"><img src="images/anchor4.jpg" alt="Champ Kind"/>4</a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com"></a></span>
    <div class="ws_shadow"></div>
    </div>
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
    </div>
    <!-- End WOWSlider.com BODY section -->
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5279b96309e7df24"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->
<div id="sources"><p>
Source(s): <a href="http://en.wikipedia.org/wiki/Anchorman_2:_The_Legend_Continues">wikipedia.com</a></p></div>
<div id="infocontent">
  <p align="left"><em><strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anchorman 2: The Legend Continues</strong></em> is an upcoming American comedy film being released on December 20, 2013, also a sequel to the 2004 film <em>Anchorman: The Legend of Ron Burgandy</em>. On March 28, 2012, actor Will Ferrell officially announced the sequel dressed in character as Ron Burgundy on the late-night talk-show <em>Conan</em>. As with the original film, it is directed by Adam McKay, produced by Judd Apatow, stars Will Ferrell and is written by Adam McKay and Will Ferrell. Unlike the original film, which was distributed by DreamWorks Pictures, <em>The Legend Continues</em> will be distributed by Paramount Pictures.</p>
  <p align="left"><em><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></em>The movie now has a website at <a href="www.anchormanmovie.com">www.anchormanmovie.com</a> where a countdown for the release of this film can be seen. By the looks of these images, I think we can expect big things when the movie comes out this December. Enjoy the poster photos and trailers all posted below, and don't forget to submit your vote in the poll!</p>
</div>
<div id="trailer1"><iframe width="560" height="315" src="//www.youtube.com/embed/Elczv0ghqw0?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div id="trailer2">
<iframe width="560" height="315" src="//www.youtube.com/embed/mZ-JX-7B3uM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="poll">
  <form method="post" action="http://poll.pollcode.com/763294"><table style="border: black 1px solid;" border="1" width="175" bgcolor="EEEEEE" cellspacing="2" cellpadding="0"><tr><td colspan="2" height="10"><font face="Verdana" size="2" color="000000"><b>What Rating Do You Think This Will Recieve</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="763294answer1"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer1">10</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="763294answer2"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer2">9</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="763294answer3"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer3">8</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="763294answer4"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer4">7</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="5" id="763294answer5"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer5">6</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="6" id="763294answer6"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer6">5</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="7" id="763294answer7"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer7">4</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="8" id="763294answer8"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer8">3</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="9" id="763294answer9"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer9">2</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="10" id="763294answer10"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer10">1</label></font></td></tr><tr><td colspan="2" height="10"><center><input type="submit" value=" Vote ">&nbsp;&nbsp;<input title="Clicking this will send you to a new page" type="submit" name="view" value=" View "></center></td></tr><tr><td colspan="2" align="right"><font face="Verdana" height="5" size="1" color="000000"></font></td></tr></table></form></div>

<span style="position: absolute; left: 0px; top: 225px; width: 1000px; border-bottom: 2px black double; height: 58px;">
<h1 style="font-weight: normal; font-size:28px"><em>Anchorman 2 Arrives Soon</em></h1></span>
<div id="contentbox2"></div>
<!--Footer Div -->
<center><div id="footer"><a href="#">Sitemap</a> <a href="#">About Us</a> <a href="#">Feedback</a></div></center> <div id="disqus"><div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'thetotempoleanchorman2'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a></div>


<!-- This is the end of the contentbox --></div>
<!-- This is the end of the container div -->
</div>
</body>
</html>

CSS:

html { 
  background: url(images/pine.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale')";
}
body { 
    margin-bottom:0px;
    font-family: Verdana, Geneva, sans-serif;
}

a {
    outline : none;
    border: none;
}

a:hover {
    color: #0FC;
}

#container {
    width: 1000px;
    height:1924px;
    position:relative;
    margin-right: auto;
    margin-left: auto;
    z-index:1;
    margin-bottom: 50px;
}

#facebook {
    position:fixed;
    right:100px;
    z-index:15;
}

#twitter {
    position:fixed;
    z-index:16;
    right:120px;
}
#google {
    position:fixed;
    top:7px;
    right: 135px;
}

#socialmediaplugins {
    text-align: right;
    position: fixed;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
    margin: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index:14;
}

#searchbox {
    background-color:#01bff6;
    border-radius:4px;
}

#searchbox:hover {
    background-color:#76b618;
    border-radius:4px;
}

#searchbox:active {
    background-color:#01bff6;
    border-radius:4px;
}

#contentbox {
    background-color:black;
    background-image:url(images/wooden.jpg);
    width: 1000px;
    margin-bottom:50px;
    height: 1924px;
 box-shadow:2px 2px 10px 10px #060606;
 -webkit-box-shadow:2px 2px 10px 10px #060606;
 -moz-box-shadow:2px 2px 10px 10px #060606;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2);

}

#contentbox2 {
    background-image:url(images/woodenmovies.jpg);
    top:299px;
    width: 1000px;
    margin-bottom:50px;
    height: 1625px;
    position: absolute;
}

#banner {
    background-image:url(images/totempolebanner.gif);
    position:absolute;
    top:25px;
    width:768px;
    height:120px;
    left:116px;
}

#navbar {
    float: left;
    position: absolute;
    top: 146px;
    left: 76px;
    width: 844px;
    height: 158px;
    font-weight:bold;
}

#navbar a { color:#0C6;
    font-size: 13px;

}

#navbar a:hover { color:#0F9;
    font-size: 13px;
}

#navbar2 a:hover { color:#0F9;
}

#navbar2 a{
    text-decoration:none;
    color:#0C6;
}
#navbar2 {
    position: absolute;
    top: 4px;
    left: 766px;
    width: 273px;
    height: 24px;
    font-size: 11px;
}

#searchbar {
    position: absolute;
    top: 23px;
    left: 885px;
    width: 118px;
    height: 69px;
}

.css_btn_class {
    font-size:9px;
    position: relative;
    top:0px;
    right:4px;
    width:90px;
    height:25px;
    font-family:Verdana;
    font-weight:normal;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #35d914;
    padding:7px 24px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) );
    background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% );
    background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% );
    background-color:#ff9d00;
    color:#ff0000;
    display:inline-block;
    text-shadow:0px 0px 1px #117cff;
    -webkit-box-shadow: 0px 0px 0px 0px #117cff;
    -moz-box-shadow: 0px 0px 0px 0px #117cff;
    box-shadow: 0px 0px 0px 0px #117cff;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}.css_btn_class:hover {
    width:90px;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) );
    background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% );
    background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% );
    background-color:#ffe711;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}.css_btn_class:active {
    position:relative;
    width:90px;
    top:1px;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}
/* This css button was generated by css-button-generator.com */

img {border:none;}
#eagle {
    position:relative;
    right: 144px;
    top:299px;
}
#owl {
    top:624px;
    position:absolute;
    left:0px;
        }

#wolf { 
    top:949px;
    position:absolute;
    right:0px;
        }
#hare {
    top:1274px;
    position:absolute;
    left:0px;
        }
#bear {
    top:1599px;
    position:absolute;
    right:0px;
        }
#footer {
    position: absolute;
    left: 393px;
    top: 1941px;
    width: 251px;
    color: #0F9;
}
#footer a {
    color: #0f9;
}
.atss { left: 0; }

#infocontent {
    position: absolute;
    z-index: 3;
    left: 15px;
    top: 333px;
    height: 348px;
    width: 789px;
}

#mywowslider {
    position: absolute;
    z-index: 3;
    left: 640px;
    top: 684px;
}

#poll {
    position: absolute;
    z-index: 3;
    left: 815px;
    top: 344px;
}

#trailer1 {
    position: absolute;
    z-index: 3;
    left: 40px;
    top: 598px;
}

#trailer2 {
    position: absolute;
    z-index: 3;
    left: 40px;
    top: 948px;
}

#trailer1header {
    position: absolute;
    z-index: 3;
    left: 200px;
    top: 550px;
    width: 240px;
    font-style: italic;
    font-weight: normal;
}

#trailer2header {
    position: absolute;
    z-index: 3;
    left: 200px;
    top: 898px;
    width: 241px;
    height: 51px;
    font-style: italic;
    font-weight: normal;
}

#disqus {
    position: absolute;
    z-index: 3;
    left: 0px;
    top: 1340px;
}

#sources {
    position: absolute;
    z-index: 3;
    left: 394px;
    top: 1249px;
    width: 212px;
}

score 1 · Accepted Answer

あなたのサイトを IE9 で試してみましたが、Chrome のように見えます。IE8 ではかなり見栄えが悪く、背景と位置がすべて壊れています。したがって、X-UA-Compatible メタタグを修正し、IE8 の部分を削除することをお勧めします。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

html - Content Box は IE9 で少しずれています...修正方法は?

1 に答える 1

Related

Reference