Internet Explorer 固定位置无法正常工作答案

【问题标题】：Internet Explorer fixed position is not working properlyInternet Explorer 固定位置无法正常工作
【发布时间】：2012-02-03 22:32:55
【问题描述】：

我的导航栏和推特框显示不正确。这些是固定的。如果您看到它们当前位于页面底部。他们不应该在哪里。

在我网站的其他页面上，这两个元素即使在 IE 中也能正常工作。我的主页与其他页面的页眉和页脚不同，所以我试图找出问题所在，但即使我摆脱了除导航栏和推特框之外的所有代码，似乎问题仍然存在，这真的很困惑我。

我被难住了，现在看不清楚。我只是想打 IE 的脸，但我知道这可能是我最近做过或改变的事情，因为这并没有发生。

另外一些似乎也在同一时间受到影响，我猜是相关的是，当您单击登录链接时，现在顶部图像和登录表单部分是分开的。同样，这只发生在我的主页上，但在这种情况下，使用登录表单，它也显示在 Chrome 中。

任何人都可以帮助我确定这里的问题，以便我可以继续我的生活。（我正在使用 IE8 进行测试）

谢谢！！！

编辑----------

我从下面的答案中注意到我在我的身体标签中。然而，这是我的代码，它显然不在我的正文标签内，并且是代码的第一行。当然，因为这个页面是一个自定义的 wordpress 模板，所以我在顶部有模板名称。标签似乎是空的，我所有的头部声明也在正文中。很奇怪......有没有人知道为什么会发生这种情况。它似乎在所有浏览器上。我的整个页面代码如下。

<?php
/*
Template Name: Home Page
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">     <title><?php bp_page_title(); ?></title>  <?php do_action( 'bp_head' ); ?>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->       <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />        <?php if ( function_exists( 'bp_sitewide_activity_feed_link' ) ) : ?>           <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> | <?php _e('Site Wide Activity RSS Feed', 'buddypress' ) ?>" href="<?php bp_sitewide_activity_feed_link() ?>" />     <?php endif; ?>     <?php if ( function_exists( 'bp_member_activity_feed_link' ) && bp_is_member() ) : ?>           <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> | <?php bp_displayed_user_fullname() ?> | <?php _e( 'Activity RSS Feed', 'buddypress' ) ?>" href="<?php bp_member_activity_feed_link() ?>" />        <?php endif; ?>     <?php if ( function_exists( 'bp_group_activity_feed_link' ) && bp_is_group() ) : ?>         <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> | <?php bp_current_group_name() ?> | <?php _e( 'Group Activity RSS Feed', 'buddypress' ) ?>" href="<?php bp_group_activity_feed_link() ?>" />        <?php endif; ?>     <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> <?php _e( 'Blog Posts RSS Feed', 'buddypress' ) ?>" href="<?php bloginfo('rss2_url'); ?>" />     <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> <?php _e( 'Blog Posts Atom Feed', 'buddypress' ) ?>" href="<?php bloginfo('atom_url'); ?>" />       <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />       

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21029219-7']);
  _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>

<!-- script for glossary highlight -->
<script type="text/javascript" src="https://www.aapltrader.com/wp-content/themes/Equilibrium/js/highlight.js"> </script>


<script type='text/javascript'>

// Browser safe opacity handling function

function setOpacity( value ) {
 document.getElementById("styled_popup").style.opacity = value / 10;
 document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
 }

 setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
 document.getElementById("styled_popup").style.display = "none"
}

function fireMyLoginPopup() {
 setOpacity( 0 );
 document.getElementById("styled_popup").style.display = "block";
 fadeInMyPopup();
}
function fireMyStockChartPopup() {
 setOpacity( 0 );
 document.getElementById("stockChart").style.display = "block";
 fadeInMyPopup();
}
</script>
<?php wp_head(); ?>

    </head>



    <body>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px; zoom: 1'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>

<td height='38' class='login-top'><a class="login-close" href='javascript:fadeOutMyPopup();'>X</a></td>
</tr>

<tr><td colspan='2' style='background-color: #686868; width: 380px; height: 200px;-moz-border-radius:  15px 0 15px 15px;
border-radius: 15px 0  15px 15px;'>

<form name="loginform" id="loginform" action="http://www.aapltrader.com/wp-login.php" method="post">

            <p class="login-username">
                <label for="user_login">Username</label>
                <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" />
            </p>
            <p class="login-password">
                <label for="user_pass">Password</label>
                <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />
            </p>
            <a class="login-forgot" href="http://www.aapltrader.com/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>
            <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
            <p class="login-submit">
                <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
                <input type="hidden" name="redirect_to" value="http://www.aapltrader.com/activity/" />
            </p>

        </form>



</td></tr>
</table>
</div>



<div id="container-sales">
  <div id="top-sales">
        <!-- <h1 class="logo"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> -->
        <a style="padding-left:0px;" href="<?php bloginfo('home'); ?>"><img src="https://www.aapltrader.com/wp-content/uploads/2011/08/aapltraderlogo.gif"/></a>    
        </div>
    <div id="sales-background">
    <div id="page-wrap-sales">



<?php //get_header(); ?>

<div id="featured"> 



<div class="clear"></div>

<div id="front-bottom">
<div id="leftCol">

<span class="welcomeH2">Learn</span> <span class="welcomeTip">from Successful Traders </span>
<ul>
<li><span class="welcomeText">Tap a global network of AAPLTraders and expand your own trading style!</span></li>
</ul>

<span class="welcomeH2">Connect</span><span class="welcomeTip"> to a Community</span>
<ul>
<li><span class="welcomeText">Share ideas in the AAPLTrader Community Room. Refine your ideas through active groups.</span></li>
</ul>

<span class="welcomeH2">Grow</span><span class="welcomeTip"> Profits</span>
<ul>
<li><span class="welcomeText">Find out what strategies are currently profiting. Get AAPL Alerts during the week and stay plugged in.</span></li>
</ul>
<a href="https://www.aapltrader.com/checkout-2?subscription=2&claim=49d393ce7e1346fa24cecd5d0eb1533d" class="green-button">Get AAPLTrader</a>
<ul style="margin:0 0 0 0;padding:0 0 0 0;">
<li><span  style="font-size:1.5em;padding:10px 0px 0 88px;"> Premium Access  </span><span style="font-size:1.2em;color:#575958;">   $19.99/month</span></li>
<br /><br />
<li> <span style="font-size: 1.4em;color: white;padding: 0px 0px 0 80px;font-weight: bold;">30 Day Money Back Guarantee </span></li>
</ul>
</div>



<div id="sales-video">




 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="530" height="400" id="csSWF">
                <param name="movie" value="http://www.howtousethinkorswim.com/media/appletrader/justmetus/media/player.swf" />
                <param name="quality" value="best" />
                <param name="wmode" value="transparent" />
                <param name="bgcolor" value="#1a1a1a" />
                <param name="allowfullscreen" value="true" />
                <param name="scale" value="showall" />
                <param name="allowscriptaccess" value="always" />
                <param name="flashvars" value="thumb=http://www.howtousethinkorswim.com/media/appletrader/justmetus/media/FirstFrame.png&containerwidth=530&containerheight=400&content=justmetus.mp4&autostart=false&blurover=false&autohide=true&smoothing=true&showbranding=false&showstartscreen=true&color=0x1A1A1A,0x1A1A1A" />
                <!--[if !IE]-->
                <object type="application/x-shockwave-flash" data="http://www.howtousethinkorswim.com/media/appletrader/justmetus/media/player.swf" width="530" height="400">
                    <param name="quality" value="best" />
                    <param name="wmode" value="transparent" />
                    <param name="bgcolor" value="#1a1a1a" />
                    <param name="allowfullscreen" value="true" />
                    <param name="scale" value="showall" />
                    <param name="allowscriptaccess" value="always" />
                    <param name="flashvars" value="thumb=http://www.howtousethinkorswim.com/media/appletrader/justmetus/media/FirstFrame.png&containerwidth=530&containerheight=400&content=justmetus.mp4&autostart=false&blurover=false&autohide=true&smoothing=true&showbranding=false&showstartscreen=true&color=0x1A1A1A,0x1A1A1A" />
                <!--![endif]-->

                <!--[if !IE]-->
                </object>
                <!--![endif]-->
            </object>



</div>






 <div class="clear"></div>

 </div>


 </div>
<div class="clear"></div>

<div id="latest-wrap">

<div class="content-sales">

<h2 >How it works?</h2> <br /> 

<span class="content-sales-p"> AAPLTrader is a social networking website similar to facebook. We give people a place where they can connect with other like minded people who trade and invest.</span>  
<br /><br /> <br />
<span class="content-sales-p"> Members get access to:</span>
<ul style="font-size:1.4em;"><li style="list-style:disc outside none"><a href="http//www.aapltrader.com/what-is-aapltrader#alerts">AAPL Alerts</a></li>
<li style="list-style:disc outside none;"><a href="http//www.aapltrader.com/what-is-aapltrader#video-update">Video Updates </a></li>
<li style="list-style:disc outside none;"><a href="http//www.aapltrader.com/what-is-aapltrader#community">Community Room</a></li>
<li style="list-style:disc outside none;"><a href="http//www.aapltrader.com/what-is-aapltrader#groups">Groups</a></li> </ul>
<br /> <br />
<span class="content-sales-p">What makes AAPLTrader different are the AAPL Alerts and the Video Updates posted by the AAPLTrader Team on our exclusive wall. To get access, simply click the Get AAPLTrader Button or <a href="http://www.aapltrader.com/what-is-aapltrader">click here</a> for more info.</span>
</div>



<div id="testimonial">
<h2>Testimonials</h2>
<img style="float:left;margin:0 15px 10px 0;" src="<?php bloginfo('template_directory'); ?>/images/quotes.gif" title=" testimonial quotes" />
<p><strong>"First of all I love your advice and analysis. So happy I found it. Its helping me to another level.
 I have been in the market for 30 plus years. I have been doing phenomenal."</strong><br /> <br /><span style="float:right;"> -Paul F. California </span></p>
<div class="clear"></div>
<span id="motto"> "The Facebook for Stock Traders." </span><br/><p> <span style="float: right;"> -Lisa T. New York</span></p>
 </div> 
 <div class="clear"></div>

<div class="push"></div>




</div> <!--Latest Wrap -->




</div> <!--Page Wrap--> 
</div> <!--Sales Background-->  
</div> <!--Container Sales-->
<div class="clear"></div>



<?php do_action( 'bp_after_container' ) ?>
        <?php do_action( 'bp_before_footer' ) ?>


<div id="footer-home">
  <div align="center">
<div class="footer-posts">
<?php
$args = array( 'numberposts' => 3 , 'category' => 4 );
$lastposts = get_posts( $args );
foreach($lastposts as $post) : setup_postdata($post); ?>
    <div class="footer-post">
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
</div>
<?php endforeach; ?>
</div> <!-- /footer-posts -->
<div class="clear"></div>

          AAPLTrader &copy; 2011 All Rights Reserved. AAPLTrader does not have any association with Apple Inc. <br /><a href="http://www.aapltrader.com/privacy-policy">Privacy Policy</a> | <a href="http://www.aapltrader.com/house-rules">House Rules</a> | <a href="http://www.aapltrader.com/terms-of-use">Terms Of Use</a> | <a href="http://www.aapltrader.com/cancellation-policy">Cancellation Policy</a> | <a href="http://www.aapltrader.com/disclaimer">Disclaimer</a> | <a href="http://www.aapltrader.com/wp-content/uploads/2010/06/riskstoc.pdf"> Risk of Stocks, Options, Commodities </a><br />

<?php if ( is_user_logged_in() ) { ?> <a href="http://www.aapltrader.com/affiliate-member"> Affiliate Information </a>  |<?php } else { ?><a href="http://www.aapltrader.com/affiliates-info"> Affiliate Information </a>  |<?php  } ?> 

 <a href="http://www.aapltrader.com/contact-us"> Contact Us </a></div>
        <p class="floatRight"></p>
        <div class="push"></div>

<?php do_action( 'bp_footer' ) ?>
</div>


<?php wp_footer(); ?>
<?php do_action( 'bp_after_footer' ) ?>

    </body>

</html>

【问题讨论】：

标签： css wordpress internet-explorer validation css-position

【解决方案1】：

您正在使用 xhtml 进行编码，xhtml 旨在在每个浏览器中正确显示，这当然是假设您的 xhtml 代码通过了验证，但事实并非如此。 Firefox 足够聪明，可以找到问题并为您解决问题，而 IE 则不然。确保您的 xhtml 通过验证，然后重试。

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.aapltrader.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

【讨论】：

注意到，使用 HTML5 doctype 似乎返回的错误更少：validator.w3.org/… -- 如果您切换 doctypes，您需要修复的错误更少。
谢谢大家，我注意到SKS提到的可能是固定位置没有正确显示的原因。感谢您的帮助。

【解决方案2】：

在 IE 中，您需要添加适当的文档类型才能使固定位置起作用。

编辑：由于某种原因，您的 doctype 定义不在第一行。请参阅下面的快照，

【讨论】：

哇，我不敢相信我以前从未见过。我真的在这件事上抬起头来。非常感谢。查看我的代码后很奇怪，文档类型是在 html 和 head 标签之前指定的，但它们出现在 body 标签中，就像你上面提到的那样。我会对此进行更多研究。我感谢你的帮助。
我为该特定页面发布了我的代码。如您所见，我的 Doctype 不在我的体内。有什么想法吗？
在你给我这个建议后，我最终修复了它。如果我无法用上面发布的代码查明确切的问题，我会尝试将此作为最后的手段。但是我有这个页面的早期版本，所以我将那个早期版本复制到其中并且它有效。但是很多文本都发生了变化，所以我用较新的版本重新调整了它，它起作用了。这真的很奇怪，因为我从字面上再次复制了整个页面并且效果很好。我无法确定任何使它无法正常工作的事情。奇怪...