Why does my css not appear correctly in IE9?

2019-02-26 19:45发布

站内问答 / HTML/CSS
911 6 5

I made a small change to my home WordPress page a couple hours ago, and now there are some random weird CSS issues in IE9 that weren't there before.

I have used IE's developer tool to try and figure out what is wrong, but that tool royally sucks compared to firebug, and the problem is only in IE. Also, unfortunately it is hosted on an intranet, so it can't be seen by anyone outside the firewall.

Here is the most pressing issue:

Text div that used to sit nicely on top of the image div is now acting very strange. See the before and after below, along with the html and css:

enter image description here

Here is the rendered html for that page if you want to take a gander:

<!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>

Here is the css for the messed up elements:

/*-------------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;
}

I don't know if it is caused by some small error on my part, but I would assume so since all the issues appeared at once.

Any help would be greatly appreciated.

For sowmya's answer:

enter image description here

6条回答
The star\"
2楼-- · 2019-02-26 20:23

IE9 is a pretty standard compliant browser. When I've found rendering difference it usually means that I've hacked my way into some pothole. Try this solution:

#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;
}
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-02-26 20:29

The IP address referenced in the code: 121.6.3.287 does not resolve, is that the correct IP? This could be where your issue lies in the fact that the location doesn't exist or atleast is not accessible.

查看更多
0人赞 添加讨论(0) 举报
走好不送
4楼-- · 2019-02-26 20:30

Add doctype in your page :-) you must have delete the doctype of your page.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2019-02-26 20:39

All div adjust as float:left then you will get actual result after all if you will not get a proper design so complete your reset your CSS.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
6楼-- · 2019-02-26 20:40

Give float:right to the right side div and float:left to left div

If the site is live please provide the url so that it would be easy to check.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
7楼-- · 2019-02-26 20:42

specify width for the div id="title" and adjust using float:left as given above

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)