为什么我的CSS无法在IE9中正确显示？

Question

几个小时前，我对自己的WordPress主页做了一个小改动，现在IE9中出现了一些以前没有的随机怪异CSS问题。

我已经使用IE的开发人员工具来尝试找出问题所在，但是与firebug相比，该工具确实很烂，而且问题仅在IE中存在。 另外，不幸的是，它托管在Intranet上，因此防火墙之外的任何人都看不到它。

这是最紧迫的问题：

曾经很好地位于图像div顶部的Text div现在表现得很奇怪。 参见下面的之前和之后，以及html和CSS：

如果您想使用甘丹纸，请参见以下页面的html：

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>NA-net | NA&#039;s Communication Network</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://121.6.3.287/na_comm_new/wp-content/themes/twentyeleven-child/style.css" />
<link rel="pingback" href="http://121.6.3.287/na_comm_new/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://121.6.3.287/na_comm_new/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="NA-net &raquo; Feed" href="http://121.6.3.287/na_comm_new/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="NA-net &raquo; Comments Feed" href="http://121.6.3.287/na_comm_new/?feed=comments-rss2" />
<link rel='stylesheet' id='wp_sidebarlogin_css_styles-css'  href='http://121.6.3.287/na_comm_new/wp-content/plugins/sidebar-login/style.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='bbp-default-bbpress-css'  href='http://121.6.3.287/na_comm_new/wp-content/plugins/bbpress/bbp-theme-compat/css/bbpress.css?ver=2.1.2' type='text/css' media='screen' />
<link rel='stylesheet' id='slider-css'  href='http://121.6.3.287/na_comm_new/wp-content/plugins/easing-slider/css/slider.css?ver=1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://121.6.3.287/na_comm_new/wp-content/plugins/easing-slider/js/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://121.6.3.287/na_comm_new/wp-content/plugins/sidebar-login/js/blockui.js?ver=1.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var sidebar_login_params = {"ajax_url":"http:\/\/121.6.3.287\/na_comm_new\/wp-admin\/admin-ajax.php","login_nonce":"bae0e08e3a"};
/* ]]> */
</script>
<script type='text/javascript' src='http://121.6.3.287/na_comm_new/wp-content/plugins/sidebar-login/js/sidebar-login.js?ver=1.0'></script>
<script type='text/javascript' src='http://121.6.3.287/na_comm_new/wp-includes/js/comment-reply.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://121.6.3.287/na_comm_new/wp-content/plugins/easing-slider/js/jquery.easing.js?ver=1.3'></script>
<script type='text/javascript' src='http://121.6.3.287/na_comm_new/wp-content/plugins/easing-slider/js/script.js?ver=1.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://121.6.3.287/na_comm_new/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://121.6.3.287/na_comm_new/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Calendar' href='http://121.6.3.287/na_comm_new/?page_id=2876' />
<link rel='next' title='Login' href='http://121.6.3.287/na_comm_new/?page_id=2919' />
<meta name="generator" content="WordPress 3.4.1" />
<link rel='canonical' href='http://121.6.3.287/na_comm_new/' />

        <script type="text/javascript" charset="utf-8">
            /* <![CDATA[ */
            var ajaxurl = 'http://121.6.3.287/na_comm_new/wp-admin/admin-ajax.php';

                        /* ]]> */
        </script>


<!-- Start of Easing Slider -->
<style type="text/css">ul.lof-navigator li{background: url(http://121.6.3.287/na_comm_new/wp-content/plugins/easing-slider/images/pagination.png) 0 0 no-repeat;} ul.lof-navigator li.active{background: url(http://121.6.3.287/na_comm_new/wp-content/plugins/easing-slider/images/pagination_current.png) 0 0 no-repeat;}
.lof-opacity{width:1000px;height:px;}
.lof-opacity li{width:1000px;height:px;}
</style>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready( function($){    
    var buttons = { previous:$('#lofslidecontent45 .lof-previous') , next:$('#lofslidecontent45 .lof-next') };
    $obj = $('#lofslidecontent45')
    .lofJSidernews( { interval : 8000,
    easing : 'easeInOutExpo',
    duration : 1200,
    auto : true,
    maxItemDisplay : 10,
    startItem:0,
    navPosition     : 'horizontal', // horizontal
    navigatorHeight : 15,
    navigatorWidth  : 25,
    buttons : buttons,
    mainWidth:1000} );  
});</script>
<!-- End of Easing Slider -->

<link rel="stylesheet" href="http://121.6.3.287/na_comm_new/wp-content/plugins/my-calendar/styles/refresh.css" type="text/css" media="all" />

<style type="text/css">
<!--
.mcjs .mc-main .details, .mcjs .mc-main .calendar-events { display: none; }
/* Styles by My Calendar - Joseph C Dolson http://www.joedolson.com/ */

.mc-event-visible {
display: block!important;
}
-->
</style>
<script type='text/javascript'>
jQuery('html').addClass('mcjs');
jQuery(document).ready(function($) { $('html').removeClass('mcjs') });
jQuery.noConflict();
</script>
<link rel='stylesheet' id='wop-css'  href='http://121.6.3.287/na_comm_new/wp-content/plugins/widgets-on-pages/wop.css' type='text/css' media='all' /></head>

<body class="home page page-id-2883 page-template page-template-welcome-page-php single-author singular two-column right-sidebar">
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <div id="title">
                    <a href="/na_comm_new"><img src="wp-content/themes/twentyeleven-child/images/logo-NAnet3.png"/></a>
                </div>
                <!-- <h1 id="site-title"><span><a href="http://121.6.3.287/na_comm_new/" title="NA-net" rel="home">NA-net</a></span></h1>
                <h2 id="site-description">NA&#039;s Communication Network</h2> -->

            </hgroup>


                                <form method="get" id="searchform" action="http://121.6.3.287/na_comm_new/">
        <label for="s" class="assistive-text">Search</label>
        <input type="text" class="field" name="s" id="s" placeholder="Search" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
    </form>

            <nav id="access" role="navigation">
                <h3 class="assistive-text">Main menu</h3>
                                <div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>
                                <div class="menu-boxes-container"><ul id="menu-boxes" class="menu"><li id="menu-item-2907" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2883 current_page_item menu-item-2907"><a href="http://121.6.3.287/na_comm_new/">Home</a></li>
<li id="menu-item-2908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2908"><a href="http://121.6.3.287/na_comm_new/?page_id=2876">Calendar</a></li>
<li id="menu-item-3125" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3125"><a href="http://121.6.3.287/na_comm_new/?cat=10">DDG&#8217;s Corner</a></li>
<li id="menu-item-3037" class="no-link menu-item menu-item-type-custom menu-item-object-custom menu-item-3037"><a href="#">Events</a>
<ul class="sub-menu">
    <li id="menu-item-3121" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3121"><a href="http://121.6.3.287/na_comm_new/?cat=11">Departmental Meeting</a></li>
    <li id="menu-item-3025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3025"><a href="http://121.6.3.287/na_comm_new/?page_id=2236">Departmental Meeting</a></li>
    <li id="menu-item-3122" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3122"><a href="http://121.6.3.287/na_comm_new/?cat=12">Induction Briefing</a></li>
    <li id="menu-item-3022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3022"><a href="http://121.6.3.287/na_comm_new/?page_id=3014">Induction Briefing</a></li>
    <li id="menu-item-3124" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3124"><a href="http://121.6.3.287/na_comm_new/?cat=13">Thematic Seminars</a></li>
    <li id="menu-item-3024" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3024"><a href="http://121.6.3.287/na_comm_new/?page_id=3010">Thematic Seminars</a></li>
    <li id="menu-item-3123" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3123"><a href="http://121.6.3.287/na_comm_new/?cat=14">Presentation Skills</a></li>
    <li id="menu-item-3023" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3023"><a href="http://121.6.3.287/na_comm_new/?page_id=3012">Presentation Skills</a></li>
</ul>
</li>
<li id="menu-item-2903" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2903"><a href="http://121.6.3.287/na_comm_new/?forum=na-forum">Forum</a></li>
<li id="menu-item-3126" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3126"><a href="http://121.6.3.287/na_comm_new/?cat=9">Blog</a></li>
<li id="menu-item-3186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3186"><a href="http://121.6.3.287/na_comm_new/?page_id=3184"></a></li>
<li id="menu-item-3195" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3195"><a href="http://121.6.3.287/na_comm_new/?page_id=3193"></a></li>
</ul></div>         </nav><!-- #access -->
    </header><!-- #branding -->


    <div id="main">

    <div id="welcome-text">
            <h1 id="welcome-message-h1">Don't miss the upcoming NA Presentation Skills Brown-Bag Lunch</h1>
            <br>
            <br>
            <p id="welcome-message-body">Thursday, 30 August, 12:30-14:30 in room A2311</p>
            <br>
            <p id="welcome-message-body">Come share your experiences or test a presentation you have prepared with your colleagues.</p>
    </div>
    <div id="welcome-image">
    </div>


    </div><!-- #main -->

    <footer id="colophon" role="contentinfo">



            <div id="footer-stuff">
                <p class="main-links">
                    <a class="nav-twitter" href="https://twitter.com/"><img src="wp-content/themes/twentyeleven-child/images/twitter-bird-light-bgs-small.png"></a> 

                    <a class="black-links" href="http://www.google.com"><img src="wp-content/themes/twentyeleven-child/images/NA white logo-small-03.png"></a>
                </p>
            </div>
    </footer><!-- #colophon -->
</div><!-- #page -->

<script type='text/javascript'>

jQuery(document).ready(function($) {
  $(".calendar-event").children().not(".event-title").hide();
  $(".calendar-event .event-title").live("click",
     function(e) {
         e.preventDefault(); // remove line if you are using a link in the event title
     $(this).parent().children().not(".event-title").toggle();
     });
  $(".calendar-event .close").live("click",
     function(e) {
         e.preventDefault();
     $(this).parent().toggle();
     });
});
jQuery(document).ready(function($) {
  $("li.mc-events").children().not(".event-date").hide();
  $("li.current-day").children().show();
  $(".event-date").live("click",
     function(e) {
     e.preventDefault();
     $(this).parent().children().not(".event-date").toggle();
     });
});
jQuery(document).ready(function($) {
  $(".mini .has-events").children().not(".trigger").hide();
  $(".mini .has-events .trigger").live("click",
     function(e) {
     e.preventDefault();     
     $(this).parent().children().not(".trigger").toggle(); 
     });
  $(".mini-event .close").live("click",
     function(e) {
         e.preventDefault();
     $(this).parent().parent().parent().toggle();
     });
});</script>
</body>
</html>

这是混乱元素的css：

/*-------------home page-------------*/
/*-----------------------------------*/

#welcome-image { 
    margin-top: -26px;
    margin-bottom: -8px;
    background-image: url("images/welcome-image6.jpg");
    height: 500px;
}

#welcome-text {
    padding: 15px;
    float: right;   
    width: 290px;
}

#welcome-message-h1 {
    color: #fafafa;
    font-size: 24px;
    font-weight: 600;
}
.welcome-message-body {
    color: #FAFAFA;
    font-size: 21px;
    font-weight: normal;
}

我不知道这是否是我的一些小错误引起的，但由于所有问题都同时出现，所以我可以这样假设。

任何帮助将不胜感激。

对于sowmya的回答：

Answer 1

IE9是一个非常符合标准的浏览器。 当我发现渲染差异时，通常意味着我已经闯入了一些坑洼。 试试这个解决方案：

#main {
  position: relative;
}

#welcome-image { 
    margin-top: -26px;
    margin-bottom: -8px;
    background-image: url("images/welcome-image6.jpg");
    height: 500px;
}

#welcome-text {
    padding: 15px;
    top: 0;
    right: 0;
    position: absolute;  
    width: 290px;
}

Answer 2

在页面中添加文档类型:-)您必须删除页面的文档类型。

Answer 3

代码：121.6.3.287中引用的IP地址无法解析，这是正确的IP吗？ 这可能是您的问题所在，因为该位置不存在或至少无法访问。

Answer 4

将float:right分配给右侧div，将float:left分配给左div

如果该网站是在线的，请提供URL，以便于检查。

Answer 5

指定div id =“ title”的宽度，并使用float：left进行调整，如上所述

Answer 6

所有div都将其调整为float:left那么如果您没有正确的设计，您将最终获得实际结果，因此请完成重置CSS的操作。