Question

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

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

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

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

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

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

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;
        }
    }
});

发送ajax'get'调用sample.php脚本：

            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是一个很好的起点。

可能有助于解决您定位的特定问题的其他polyfill集合位于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>

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

3 个答案: