为什么IE11上有奇怪的行为？
[英]Why is there strange behaviour on IE11?
问题描述
It seems that there is an issue with my deployed version of a jQuery Mobile site. 
我的jQuery Mobile网站的部署版本似乎存在问题。 Running on local machine, it looks ok. 在本地计算机上运行，看起来还可以。
However when deploying to a testserver, the ui of jQuery Mobile runs into a problem (as shown in the picture below). 但是，当部署到测试服务器时，jQuery Mobile的用户界面遇到了问题（如下图所示）。 I have tested the deployed webpage on both IE11 and Chrome. 我已经在IE11和Chrome上测试了已部署的网页。 On Chrome it looks exactly like the local hosted version, so it's only "strange" iu on IE11. 在Chrome上，它看起来完全像本地托管版本，因此在IE11上只是“奇怪”的iu。
The HTML source is of course identical on both version, excepts the path to the files (css/js), but again on Chrome it works on both 'versions'. 除了文件的路径（css / js）外，两个版本的HTML源当然是相同的，但是在Chrome上，它在两个“版本”上均有效。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width" initial-scale="1" />
<!-- Styles -->
<link href="/Content/Site.css" rel="stylesheet" type="text/css"/>
<link href="/Content/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css"/>
<link href="/Content/jquery.mobile.datepicker.css" rel="stylesheet" type="text/css"/>
<!-- Scripts -->
<script src="/Scripts/Bundles/jquery?v=_evuqQpQzfiv74i_e2xne0q8qDFolKEd-XnaMgC-rWw1"></script>
<script src="/Scripts/jquery.ui.datepicker-nb-NO.js"></script>
<script src="/Scripts/Bundles/jqueryMobile?v=sCRDQK2ukYmfF8e6gB7crpqBhGj3REAZ0OWnxCy4ozU1"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-theme="a">
<a href="/" data-icon="home" data-iconpos="notext">Home</a>
<h1></h1>
</div>
<div data-role="content">
<a href='#' data-role="button"><div><div class="btn-icon-text">Button 1</div></div></a>
<a href='#' data-role="button"><div><div class="btn-icon-text">Button 2</div></div></a>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<div id="leftBottomContent" style="float: left"><a href="#" data-rel="back" class="ui-btn">back</a></div>
<div id="rightBottomContent" style="float: right"></div>
<div id="centerBottomContent" style="margin-left: auto; margin-right: auto; text-align: center; margin-top: 15px;"></div>
</div>
</div>
</body>
</html>
I've checked using Fiddler that the requests from the server are ok. 我已经使用Fiddler检查了服务器的请求是否正常。 Can anyone point me in a direction to figure this one out? 谁能指出我的想法来解决这个问题？
3 个解决方案
解决方案1
2 已采纳 2014-10-10 14:30:39
So, setting compatibility mode on your own PC fixes the issue for you, but how about for anybody else who tries to use your application? 因此，在您自己的PC上设置兼容模式可以为您解决问题，但是其他尝试使用您的应用程序的人呢？
You can add a meta header to your Layout that will force compatibility mode and in turn make it so others do not have the same issue that you're seeing 您可以在布局中添加一个meta标头，以强制使用兼容模式，从而使其兼容，从而使其他人不会遇到与您看到的相同的问题
<meta http-equiv="X-UA-Compatible" content="IE=9">
be sure to add this immediately after the <head> tag in your html 确保在HTML中<head>标记后立即添加此标记
解决方案2
0 2014-10-06 17:23:08
在Intranet网站上关闭兼容模式解决了我的问题
解决方案3
0 2014-10-10 18:54:55
Add below code to your header page, which makes users to use compatible mode by default when application is used: 在您的标题页中添加以下代码，这使用户在使用应用程序时默认使用兼容模式：
<%
response.addHeader("X-UA-Compatible", "IE=edge");
%>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.