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:
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'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 » Feed" href="http://121.6.3.287/na_comm_new/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="NA-net » 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'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’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:
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;
}
Add doctype in your page :-) you must have delete the doctype of your page.
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.
specify width for the div id="title" and adjust using float:left as given above
Robertwm
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.
Sowmya
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.
来源：https://stackoverflow.com/questions/12298807/why-does-my-css-not-appear-correctly-in-ie9