Question

我试图制作一个小脚本来设计风格＆＃34;选择＆＃34;标签在我的html测试中支持＆＃34;外观＆＃34;风格属性：

    if ("webkitAppearance" in select.style ||
        "MozAppearance" in select.style ||
        "oAppearance" in select.style ||
        "appearance" in select.style ||
        "-ms-expand" in select.style) {
      return;
    } 
    // else apply wrapper and style it.

问题是我不知道如何检查-ms-expand属性，因为它不起作用，我不想在这种情况下使用浏览器版本嗅探。 / p>

Answer 1

您无法在javascript中检查-ms-expand，因为它是伪元素，并且不会影响内容。您无法像::before中的::after / Modernizr那样检测到它，但在IE 10+中启用了-ms-expand，因此最好检测是IE 10或更高的javascript：

检测IE 11：

!window.ActiveXObject && "ActiveXObject" in window

检测IE 10：

var isIE10 = false;
/*@cc_on
    if (/^10/.test(@_jscript_version)) {
        isIE10 = true;
    }
@*/

Answer 2

在性能方面不是最佳解决方案，但您可以尝试这样做：

var expandSupport = (function(){
    try{
        var style = document.createElement("style");
        style.textContent = "#ie10-test::-ms-expand{ }";
        document.body.appendChild(style);
        var supported = !!style.sheet.rules.length;
        document.body.removeChild(style);
        return supported;
    } catch(e){ return false; }
}());

document.body.appendChild(document.createTextNode(expandSupport ? "Your browser appears to support the -ms-expand pseudo-element" : "Your browser doesn't appear to support the -ms-expand pseudo-element"));

Fiddle here

这个工作的原因是因为浏览器会丢弃他们不支持或不能解释的任何选择器，这意味着任何浏览器都不理解“:: - ms-expand”伪元素可能是什么IE10或以上。

基本上，这段代码所做的就是创建一个虚拟＆lt; style＆gt;标记，添加仅支持IE10 +的规则集，并报告其中找到的规则数。

检查“-ms-expand”支持

2 个答案: