IE条件语句显示div,即使条件说它不应该

时间:2014-04-29 15:35:55

标签: html5 internet-explorer internet-explorer-9 html5boilerplate

我有一个特殊的问题,我希望有人之前遇到过这个并解决了这个问题,或者知道这个问题并且知道造成这个问题的原因。

我正在使用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 以及安德鲁 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>

班级的css元素&#34; browsehappy&#34;像这样......

.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>

.htaccess for apache的一部分

如果我的文件夹中包含html文件的服务器配置文件,那么一切正常。

但我的部分问题是我无法控制或甚至访问该网站将要驻留的最终网络服务器。所以我必须提出一个不涉及服务器配置文件的解决方案。

现在top标签​​前面的条件语句似乎正在运行。在IE9中打开时,它打开了IE 9兼容性视图浏览器模式和IE9标准文档模式(相对于IE7文档模式和IE9可联网性)

但是,body标签内的条件语句无法正常运行。现在正如我之前提到的,因为我无法控制网站的最终网络服务器,我从根文件夹中删除了配置文件,并使用元标记方法强制浏览器。

enter image description here

这是我在IE9中打开时没有根文件夹中的服务器配置文件的屏幕截图。使用配置文件,它的行为正确。

现在我的问题是即使浏览器在IE9模式下打开,为什么该部门会出现?

非常感谢任何帮助。提前致谢。 p.s:输出在ie11中打开时工作正常。没有在ie10中测试过。

1 个答案:

答案 0 :(得分:1)

由于该站点在IE9 Compat View中打开,我怀疑您在本地托管此页面,并且该页面正在Intranet区域中加载。如果您在互联网上托管,这将影响结果。您可以(暂时)取消选中IE兼容性视图设置中的“在兼容性视图中显示Intranet站点”设置,以查看是否会更改结果。