为什么我的CSS不能正确显示在IE9中？ [英] Why does my css not appear correctly in IE9?
本文介绍了为什么我的CSS不能正确显示在IE9中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
几个小时前，我对我的家的WordPress页面做了一个小的改变，现在有一些随机奇怪的CSS问题在IE9，以前没有。
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.
我使用IE的开发者工具来尝试找出错误，但是该工具相对于firebug来说更糟糕，问题只在于IE。另外，不幸的是，它是在内部网上托管的，所以它不能被防火墙外的任何人看到。
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.
这是最紧迫的问题： strong>
Here is the most pressing issue:
文字div现在非常奇怪。与html和css一起查看之前和之后：
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:
如果你想要一个gander，这是这个页面的渲染html：
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>
这里是乱七八糟的元素的CSS：
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.
对于sowmya的回答：
For sowmya's answer:
推荐答案
IE9是一个非常标准的兼容浏览器。当我发现渲染差异时，通常意味着我已经进入了一些坑洞。尝试此解决方案：
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;
}
这篇关于为什么我的CSS不能正确显示在IE9中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
