基于 IE 文档模式加载 CSS 样式表

Question

我正在构建一个网站，我想根据浏览器所在的document mode（而不是browser mode）包含不同版本的样式表。

例如，我可能想要加载main_ie8.css documentmode = ie8，但如果documentmode = ie9我可能想要加载main_ie9.css

我有许多用户在兼容模式下运行IE9。这会默认document mode为 ie7 标准。我使用以下元标记来强制document mode IE9中的IE9标准：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

问题是browser mode仍设置为IE兼容性。因此，用户代理仍设置为IE7。

由于服务器端无法确定浏览器运行document mode，并且条件注释也基于browser mode而不是document mode，因此如何基于document mode而不是browser mode加载css文件。

Answer 1

使用此代码检测浏览器模式和文档模式。

var j = jQuery.noConflict();
j(document).ready(function(){
    /* detect usage of IE Developer Tools using different Mode for Browser and Document */
    if(j.browser.msie) {
        var browserVersion = j.browser.version.slice(0,j.browser.version.indexOf("."));
        var documentVersion = document.documentMode;
        }
    }
});

向示例.php脚本发送 ajax 'get' 调用：

            if (window.XMLHttpRequest)
            {
              xmlhttp=new XMLHttpRequest();
            }
            else
            {
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //do the settings based on the response from php
                    /*you can echo the css  file name to be picked 
based
 on browser mode or document mode*/
                        var response=xmlhttp.responseText;
                    }
                }

xmlhttp.open("GET","http://<?php echo IP; ?>/yourapp/sample.php?mode="+,true);
            xmlhttp.send();

希望对您有所帮助！

Answer 2

你可以运行一个条件的javascript来测试文档模式，然后附加css。 像这样：

if (BrowserDetect.browser == 'Explorer')
{
    if (document.documentMode == 7 && BrowserDetect.version > 7)
    {
        // user is running IE in compatability mode
        // load special CSS
    }
}

从类似帖子的答案中得到了这个想法 https://stackoverflow.com/a/13732003/3100667

如果这更像是浏览器对 CSS 样式的支持问题（听起来像），您还可以通过加载填充程序和 polyfill 来解决此问题，以在较旧的 IE 版本中启用 CSS3 支持。流行的HTML5 Shiv是一个很好的起点。

可能有助于解决目标特定问题的其他填充代码集合位于 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Answer 3

您可以尝试条件注释

http://www.quirksmode.org/css/condcom.html

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>