【问题标题】:IE conditional statement displaying div even though the condition says it shouldn't显示 div 的 IE 条件语句,即使条件表明它不应该
【发布时间】: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


    【解决方案1】:

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

    【讨论】:

    • 抱歉延迟响应。由于我在 IE 9 中打开,我的 body 标签中的条件应该是 false,因此不应该显示 div,对吗?还是我在这里遗漏了什么?
    • 但是由于您可能在 Intranet 区域中,因此页面的浏览器模式可能会设置为 IE7 以兼容。如果该站点最终将在 Internet 上,我建议您首先删除您的 repro 的 Intranet Zone 方面。然后它可能会按您的预期工作。
    • 谢谢。这似乎解决了我的问题( Div 没有出现)。但我知道我在这里问了另一个基本问题……为什么 IE 会区分 Intranet 站点和 Internet 站点?问这个问题很抱歉。如果你能指出我正确的研究方向,那将不胜感激。再次感谢。
    • 这里是博文announcing Compatibility View in 2008。如果您查看兼容性视图和企业部分,您将看到添加的位置。不幸的是,很多企业应用程序都是为 IE6 和 IE7 编写的,因此 Intranet 区域的默认设置是兼容的。可悲的是,许多企业仍然依赖这种兼容性。这让 Web 开发人员很痛苦,但如果不需要,您可以关闭该设置。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-05-31
    • 2013-04-24
    • 2014-07-31
    • 1970-01-01
    • 1970-01-01
    • 2022-04-06
    • 1970-01-01
    相关资源
    最近更新 更多