為什么我的CSS無法在IE9中正確顯示？
[英]Why does my css not appear correctly in IE9?
問題描述
幾個小時前，我對自己的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'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：
/*-------------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的回答：
6 個解決方案
解決方案1
1 已采納 2012-09-06 11:26:17
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;
}
解決方案2
0 2012-09-06 09:10:08
在頁面中添加文檔類型:-)您必須刪除頁面的文檔類型。
解決方案3
0 2012-09-06 09:31:59
代碼：121.6.3.287中引用的IP地址無法解析，這是正確的IP嗎？ 這可能是您的問題所在，因為該位置不存在或至少無法訪問。
解決方案4
0 2012-09-06 11:14:01
將float:right分配給右側div，將float:left分配給左div
如果該網站是在線的，請提供URL，以便於檢查。
解決方案5
0 2012-09-06 11:31:27
指定div id =“ title”的寬度，並使用float：left進行調整，如上所述
解決方案6
0 2012-09-06 13:27:47
所有div都將其調整為float:left那么如果您沒有正確的設計，您將最終獲得實際結果，因此請完成重置CSS的操作。
為什么此按鈕在IE9中顯示為藍色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.