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
相关标签