IE渲染HTML的方式與Firefox，Chrome和iOS不同
[英]IE rendering HTML differently than Firefox, Chrome, and iOS
問題描述
我一直在為mediawiki開發一個新的皮膚，它遵循Brigham Young大學網頁的CSS和布局https://www.byu.edu
經過一個月的工作，進行了許多小的改動，它已准備好向人們展示。 我的同事試圖在Internet Explorer上查看該頁面，並且立即在頁面中自動填充的所有水平列表都成為垂直列表。
該網站位於https://caedm.et.byu.edu/wiki
這是皮膚的代碼，因為我使用的是大學提供的代碼，我想它必須是我的一個改變導致了這個問題。
從iPad，Android手機，Firefox（Linux和Windows）以及Chromium瀏覽時，該網站似乎可以正常運行和渲染，但它在IE9中顯着失敗。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" class="no-js">
<head profile="http://gmpg.org/xfn/11">
<title><?php $this->html('title'); ?> – <?php echo($wgSitename); ?></title>
<meta property="og:title" value="<?php $this->html('title'); ?>">
<meta property="og:site_name" content="<?php echo($wgSitename); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="<?php echo($description); ?>"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<?php if ($this->data['content_actions']['edit']) { ?>
<link rel="alternate" type="application/x-wiki" title="Edit" href="<?php echo($this->data['content_actions']['edit']['href']); ?>" />
<?php } ?>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="<?php $this->text('scriptpath'); ?>/opensearch_desc.php" title="<?php echo($wgSitename); ?>" />
<link rel="copyright" href="<?php $this->text('scriptpath'); ?>/index.php/Copyright_Notice" />
<link rel="alternate" type="application/atom+xml" title="<?php echo($wgSitename); ?> Atom feed" href="<?php $this->text('scriptpath'); ?>/index.php?title=Special:RecentChanges&feed=atom" />
<!-- Insert plugin stylesheets here -->
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/slider.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/calendar.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/news.css" />
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/plugins/socialmedia.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="byuskin/template/js/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/wiki/skins/byuskin/template/js/libs/modernizr-2.0-basic.min.js"></script>
<!-- Insert plugin stylesheets here -->
<link rel="stylesheet" href="/wiki/skins/byuskin/template/css/style.css" />
<link rel="stylesheet" href="<?php $this->text('stylepath' ) ?>/common/shared.css" media="screen" />
<link rel="stylesheet" href="<?php $this->text('stylepath' ) ?>/common/commonPrint.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php $this->text('stylepath' ) ?>/byuskin/template/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php $this->text('stylepath' ) ?>/byuskin/template/css/style.css" />
<?php print Skin::makeGlobalVariablesScript( $this->data ); ?>
<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath' ) ?>/common/wikibits.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"><!-- wikibits js --></script>
</head>
<body class="single single-post">
<header id="main-header">
<div id="header-top" class="wrapper">
<div id="logo">
<a href="http://www.byu.edu/" class="byu"><img src="/wiki/skins/byuskin/template/img/byu-logo.png" alt="BYU Logo" usemap="#byulogo" /></a>
<map name="byulogo">
<area shape="rect" href="http://www.byu.edu" coords="0,1,63,16" />
<area shape="rect" href="http://beta.et.byu.net" coords="70,0,363,16" />
</map>
</div>
<a href="http://ssldev.et.byu.edu/wiki/index.php5" id="site-name">CAEDM</a>
<div id="search-container">
<? if ( !isset( $_COOKIE['CMSUsername']) || $_COOKIE['CMSUsername']=="" || $_COOKIE['CMSPassword']=="" || !isset( $_COOKIE['CMSPassword'] )) {?>
<a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogin&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology" class="button">CAEDM Login</a>
<? } else { ?>
<a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogout&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology" class="button"> Logout </a>
<script>
var IDLE_TIMEOUT = 60*60*4; //seconds->4 hours
var _idleSecondsCounter = 0;
document.onclick = function() {
_idleSecondsCounter = 0;
};
document.onmousemove = function() {
_idleSecondsCounter = 0;
};
document.onkeypress = function() {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
alert("Time expired!");
document.location.href = "https://ssldev.et.byu.edu/wiki/index.php5?title=Special:UserLogout&returnto=Ira+A.+Fulton+College+of+Engineering+and+Technology";
}
}
</script>
<? } ?>
<!-- ENTER YOUR SEARCH URL under action -->
<form action="<?php $this->text('searchaction') ?>" id="searchform">
<input type="text" name="search" id="search" placeholder="Search CAEDM Help Pages" <?php if( isset( $this->data['search'] ) ) { ?>
value="<?php $this->text('search') ?>"
<?php } ?> />
<input type="image" src="/wiki/skins/byuskin/template/img/search-button.png" alt="Search" id="search-button" value="<?php $this->msg('searchbutton') ?>"/>
</form>
</div>
<nav id="secondary-nav" class="no-js">
<ul>
<li class="nochild"><a href="https://my.byu.edu">MyBYU</a></li>
<li class="nochild"><a href="https://learningsuite.byu.edu">Learning Suite</a></li>
<li class="nochild"><a href="http://ssldev.et.byu.edu/wiki/index.php5?title=Contact_Us">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
<nav id="primary-nav" class="no-js">
<ul>
<li><a href="">Accounts</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Accounts'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Accounts Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=An_Introduction_to_CAEDM_Video"><img src="/wiki/images/thumb/f/fd/CAEDM_Intro.png/320px-CAEDM_Intro.png" width="320" height="228"></a>
<p>CAEDM may be new to you, but there are many ways that you can learn how to maximize your experience with CAEDM.</p>
</div>
</div>
</li>
<li><a href="">Remote Computing</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Remote Computing'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%;margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Remote Computing Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Using_Your_Computer_with_CAEDM_Video"><img src="/wiki/images/thumb/8/82/CAEDM_wYours.png/320px-CAEDM_wYours.png" width="320" height="228"></a>
<p>CAEDM offers a wide variety of resources that can all be used no matter where you happen to be. From home, work, and even from your phone, your CAEDM needs can be fulfilled.</p>
</div>
</div>
</li>
<li> <a href="">Files</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Files'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Files Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Installing_the_CAEDM_Printer_Video"><img src="/wiki/images/Accessing_files.png" width="320" height="228"></a>
<p>CAEDM provides file access anywhere on campus, and from home.</p>
</div>
</div>
</li>
<li> <a href="">Printing</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Printing'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Printing Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Installing_the_CAEDM_Printer_Video"><img src="/wiki/images/c/c2/Printer_menu.jpg"></a>
<p>CAEDM allows you to print from the labs, but also from individual computer at your own leasure.</p>
</div>
</div>
</li>
<li> <a href="">Labs and Software</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Labs'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Labs Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=Using_a_CAEDM_Computer_Video"><img src="/wiki/images/b/b6/Lab_and_software_menu.jpg"></a>
<p>CAEDM allows you to print from the labs, but also from individual computer at your own leasure.</p>
</div>
</div>
</li>
<li> <a href="">Groups</a>
<div class="mega">
<ul class="links">
<?php foreach( $this->data['sidebar']['Groups'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="featured menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul><ul class="links" style="position: absolute; top:180px;">
<li style="font-size:130%; margin-bottom:5px;"><u>Learn More</u></li>
<?php foreach( $this->data['sidebar']['Groups Learn More'] as $key => $val ) { ?>
<li id="menu-item-<?php echo Sanitizer::escapeId( $val['id'] ) ?>" class="menu-item menu-item-type-post_type menu-item">
<a href="<?php echo htmlspecialchars( $val['href'] ) ?>"><?php echo htmlspecialchars( $val['text'] ) ?></a>
</li>
<?php } ?>
</ul>
<div class="highlight"><a href="https://ssldev.et.byu.edu/wiki/index.php5?title=CAEDM_Groups_Video"><img src="/wiki/images/thumb/4/43/Groups.png/320px-Groups.png" height="228" width="320"></a>
<p>CAEDM provides many group collaboration resources.</p>
</div>
</div>
</li>
我只包括開頭，因為我不希望人們必須調試任何東西，但IE解釋無序列表的常見問題是什么，在任何其他瀏覽器中都無法檢測到？
有什么方法可以解決這個問題？
更新：CSS部分：
我認為這是最有用的部分，但可能還有其他一些事情需要加入：
ul, ol { margin-left: 1.5em; display: inline;}
ol { list-style-type:decimal; margin-left:2em;}
ol ol { list-style-type: lower-alpha }
ol ol ol { list-style-type: lower-roman }
ol ol ol ol { list-style-type: decimal }
ol ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol ol { list-style-type: lower-roman }
ul { list-style-type: none; margin-left:2em;}
ul ul { list-style-type: none }
ul ul ul { list-style-type: none }
ul ul ul ul { list-style-type: none }
ul ul ul ul ul { list-style-type: none }
ul ul ul ul ul ul { list-style-type: none }
ul ul { margin-top:.25em; margin-bottom:.25em;}
nav ul, nav ul ul { list-style:none}
nav ul, nav li { margin:0;}
dt { font-weight: bold }
dd { padding: 0 0 .75em 1em }
2 個解決方案
解決方案1
2 已采納 2013-07-18 20:30:47
您可以使用修復程序定義另一個css文件。 在head-tags中包含下一個代碼：
<!--[if lt IE 9]>
<link href=".." />
<![endif]-->
<!--[if lte IE 8]>
<link href=".." />
<![endif]-->
<!--[if lte IE 7]>
<link href=".." />
<![endif]-->
<!--[if lte IE 6]>
<link href=".." />
<![endif]-->
其中lt =低於且lte =低於或等於。 但是這不再適用於IE10。 在那里你可以使用你的css中的下一個代碼：
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
解決方案2
0 2013-07-18 21:08:15
最后，答案是你們所有人都說的一切的組合。 添加顯示：內聯很重要，但它在其他瀏覽器中引起了很多問題。 因此，我將接受Gothematic的答案作為正確的答案，因為最終我將不得不大量使用它來修復IE中的渲染，但也非常感謝Space Beers用於Inline塊。
Chrome / IE和Firefox之間顯示的Wordpress產品頁面有所不同
[英]Wordpress Product Page displayed differently between Chrome/IE and Firefox
PHP腳本和HTML - 這適用於Firefox和Chrome，但不適用於IE
[英]PHP Script and HTML - This works in Firefox and Chrome, but not IE
HTML響應標頭在firefox / chrome中為null，但在IE中有效
[英]HTML response header is null in firefox/chrome but works in IE
Firefox 過早自動關閉 HTML 元素 - IE 和 Chrome 正常
[英]Firefox automatically closing an HTML element too early - IE and Chrome OK
為什么這個PNG圖像在Chrome和Firefox上的呈現方式不同？
[英]Why is this PNG image rendered differently on Chrome and Firefox?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Chrome和Firefox以不同方式處理JavaScript / HTML
Chrome / IE和Firefox之間顯示的Wordpress產品頁面有所不同
PHP腳本和HTML - 這適用於Firefox和Chrome，但不適用於IE
.php和.html。 IE為什么渲染它們不同？
HTML響應標頭在firefox / chrome中為null，但在IE中有效
Firefox 過早自動關閉 HTML 元素 - IE 和 Chrome 正常
為什么這個PNG圖像在Chrome和Firefox上的呈現方式不同？
Chrome評估php if語句與Firefox的不同
2種不同的輸出（Chrome和IE / FIREFOX）
查詢適用於Firefox，但不適用於ie和chrome
相關標簽