我一直在为 mediawiki 开发一个新皮肤，它遵循杨百翰大学网页https://www.byu.edu的 CSS 和布局
经过一个月的努力，做了很多小改动，它已经准备好向人们展示了。我的同事试图在 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 }