Question

使用较旧的IE（IE8，IE7），您可以使用现代输入类型（电子邮件，网址，数字等）并使用JS poly-fill来实现HTML5，如表单验证。

使用IE10兼容模式，这些电子邮件/网址输入类型会恢复为type =“text”，从而导致这些多边形填充问题

HTML：

<input type="email" id="test1" />
<input type="url" id="test2" />
<input type="text" id="test3" />

JS：

// IE7, IE8, IE8 compatibility mode this will be "email"    
console.log($("#test1").attr("type"));

//IE10 standards, IE10 compatibility (7,8,9), this will be "text"
console.log($("#test1").attr("type"));

所需属性存在类似问题。你可以通过分析.attributes属性来解决这个问题（在IE10 Compat模式下，显示两个必需的属性，一个是字符串，一个是int），例如：

function check(el){

    var req, type, attr,
    attrs = el.attributes;

    for (var i = 0, l = attrs.length; i < l; i++) {
        attr = attrs.item(i);
        if (attr.nodeName === "required" || attr.nodeName === "type") {

            console.log("name  : " + attr.nodeName);
            console.log("value : " + attr.nodeValue);
            console.log("type of nodeValue: " + (typeof attr.nodeValue));

        }
    }
}

但是没有运气类型属性被重复并显示预期值。兼容模式只是fubar？请不要就如何强制IE进入标准模式提出建议。文档模式通过我们（大型）公司内部的HTTP标头进行控制。

Answer 1

之前的question / answer似乎有您要搜索的信息。注意第二个答案特别提供了一个分叉的jQuery验证插件，它可以补偿已知问题。

Answer 2

您可以在同一个标签上设置data-type具有相同的值，将其与运行时的计算值进行比较，然后在加载后不同时覆盖。然后，加载polyfill。

IE10兼容模式输入类型= email / url / number

2 个答案: