【发布时间】:2014-06-15 15:43:01
【问题描述】:
我遇到了一个特殊的问题,我希望有人以前遇到过这个问题并解决了这个问题,或者知道这个问题并且对导致这个问题的原因有很好的了解。
我正在使用 HTML5-Boilerplate v4.3.0 创建一个站点,其中我有 IE 的常规条件语句(强制浏览器使用最新的渲染引擎),如下所示...
<!--[if HTML5]><![endif]-->
<!doctype html>
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9" lang="en"> <![endif]-->
<!--[(gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--[if !HTML5]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8"> ....
<!--- End Meta tags -->
现在我有这些代码基于 link here , this link 以及 andrew here. 发布的 SO 答案
我在body标签中还有一个针对IE的小条件语句,如果版本小于9,那么它会显示一个div,如下所示......
<body>
<!--[if lt IE 9]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience. This site was designed to work with modern browsers like Internet Explorer 9 or above, Firefox, Chrome, etc.</p>
<![endif]-->
.......
</body>
“browsehappy”类的 css 元素是这样的......
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
position:fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #fff;
font-size: 14px;
width: 100%;
text-align: center;
}
我正在运行基于 IIS7 和/或 apache 的 Xampp 作为我的网络服务器。而且我知道在许多在线帮助站点中,他们说强制 IE 以特定模式打开的最佳方法是使用服务器配置文件。因此我创建了文件...
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=10" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
IIS7 的 web.config 和...
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
# `mod_headers` can't match based on the content-type, however, we only
# want to send this header for HTML pages and not for the other resources
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe? g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
Apache 的 .htaccess 的一部分
如果我的文件夹中有服务器配置文件和 html 文件,一切都会正常工作。
但我的部分问题是我无法控制甚至访问该站点将驻留的最终网络服务器。所以我必须想出一个不涉及服务器配置文件的解决方案。
现在顶部的条件语句,在 head 标记之前,似乎正在工作。在 IE9 中打开时,它会在 IE 9 兼容性视图浏览器模式和 IE9 标准文档模式下打开(与 IE7 文档模式和 IE9 兼容性相反)
但是,body 标签内的条件语句不能正常工作。现在正如我所提到的,由于我无法控制网站的最终网络服务器,我从根文件夹中删除了配置文件并使用元标记方法来强制浏览器。
这是我在 IE9 中打开时的屏幕截图,而根文件夹中没有服务器配置文件。使用配置文件,它的行为正确。
现在我的问题是,即使浏览器在 IE9 模式下打开,为什么会出现分区?
任何帮助将不胜感激。提前致谢。 ps:在ie11中打开时输出工作正常。没有在ie10中测试过。
【问题讨论】:
标签: html internet-explorer internet-explorer-9 html5boilerplate