0
Я разрабатывает новую кожу для MediaWiki, который следует за CSS и расположение веб-страницы Brigham Young University https://www.byu.eduIE рендеринга HTML иначе, чем Firefox, Chrome, и прошивкой
После работы над ним в течение месяца, в результате чего многие небольшие изменения, он был готов показать людям. Моя коллега попыталась просмотреть страницу в 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>
I включены только начало, так как я не хочу, чтобы люди должны отладить что-нибудь, но есть общая проблема с тем, как IE интерпретирует неупорядоченные списки, которые не будут обнаружены в любом другом браузере?
Каковы способы устранения этой проблемы?
Update: раздел из 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 }
Добро пожаловать в веб-дизайн. – SpaceBeers
Добро пожаловать в мир нескольких браузеров ... К сожалению, это нормальное поведение. Вот почему вы должны всегда тестировать все браузеры. Я вижу, что вы используете PHP, поэтому я действительно не знаю, имеет ли это значение. Но, честно говоря, не видя фактического CSS, это будет трудно сказать. – AntLaC
Быть серьезным на минуту, являются ли ваши списки встроенным блоком? – SpaceBeers