&nbs p;
没错，我还是在下棋。
一、IE10, 你可以的
讲个故事吧。
—————故事开始——————
有个顽童名叫IE, 其9岁的时候，不举；10岁的时候，可以举。
这位叫做IE的顽童，跟纲手婆婆一样，可以向下控制年龄显示，7岁到9岁都可以。但是，为了不让人看穿其真实年龄，当其7~9岁模样的时候，需要不举。不过，身体是同一副，诱人妹子在眼前，不是说不举就不举的。
怎么办？按照道理讲，10岁的IE可以在多多熟悉9岁的身体，学会控制与忍耐。——但是，这是需要多多练习，需要付出不少努力的。然而，这位名叫IE的男童，好逸恶劳、不求上进，其想了一个快捷的办法：当我变成9岁的时候，直接把小弟弟咔嚓了，这样，不就举不起来了嘛！！哈哈，我好聪明！！
—————故事结束——————
这是第二个故事。
—————故事开始——————
IE6-IE9浏览器不支持 type="email" 的输入框，因此，在这些浏览器的表单提交时：
<input type="email" value="aaaaaaa" />
浏览器不会提示你“邮箱格式不正确”。
IE10下会，类似下面：
也就是说，在IE6~IE9时代，虽然 HTML 代码是 ty PE ="em ai l" 但是，表现型却是 type="text" ，这使得我们可以渐进使用HT ML 5的指定表单元素。
在IE10浏览器中，存在如下一些模式：
OK, 现在就存在举与不举的问题了——IE10 email可举，向下的IE7 -i E9不可举，怎么办？
我们先看看IE9浏览器，虽然也存在向下兼容模式（IE7-IE8）。但是，所有浏览器都不认识 type="email" ，因此，没有不同，没有处理！
但是，IE10……IE它是如此地懒惰，为了向下兼容，其做法相当霸气，直接将 type="email" 从渲染层面给“阉掉”了！
& # 8212;————故事结束——————
前后两个故事，你更愿意相信那一个？
二、IE10，你个阉人
IE10兼容模式是如何“阉割”的？
且看如下简短HTML代码：
<id="email" type="email" />
然后，我们在IE10↘IE8以及ietseter IE8下输出其 outerHTML 代码，结果：
输出其 getAttribute("type") 值，IE10↘IE8下为：
其他IE8下：
或者 ，我们从 CSS 层面查看，如下选择器：
input[type=email] { padding: 4px 2px 4px 25px; border: 1px solid #aaa; background: #fff url('邮箱小图标') no-repeat left center ; } IE8浏览器是认识属性选择器的，但是，在IE10↘IE8下，由于IE10自以为高明地把 type=email 直接阉成了 type=text ，因此，输入框是这个样子：
而不是 应该 的这个样子：
上面三个小证明，可以狠狠地点击这里查看：type=email前后渲染变化demo
一句话，IE10浏览器下，所有向下兼容的版本，在渲染 < type="email" /> 这段HTML时候，擅自改动了HTML内容，以 < type="text" /> 输出并渲染！因此，这种阉割导致了很多相关不兼容与悲剧！！
我看查看加载后的HTML代码：
只有HTML5支持类型 input 框才有此悲剧
什么 意思 ？也就是说，IE10向下版本，只有IE10本身支持的 type= email 或 url 或 number 或 tel 或 range 的时候，才会阉割成 text 类型。
IE10本身不支持的类型，如 type=date 或自定义的 type=zipcode 是可以 正常 识别的。
三、渐进使用的大悲剧
IE10这种取巧的懒惰做法是在是太龌龊了，
我表示很气愤！
这种龌龊做法实际上阻碍的HTML5表单当下 阶段 的普及与应用。
比方说，我想根据文本框的 type 类型，进行正则匹配，进行表单验证。使用HTML5表单是最佳选择，因为 ①规范 ②面向未来 ③低学习 成本
如果没有IE10，尤其IE10浏览器向下兼容版本的龌龊做法，这个idea是相当赞，可行性相当高，且无 压力 。IE10真是毁锅的老鼠屎！
四、后知后觉的存在
进过我的反复尝试与测试，要让 type=email 存在于页面文档中，只能在页面渲染完毕后（后知后觉）进行处理，只能是这样子干：
VAR email = document.createElement("input"); email.type = "email"; // 某些IE浏览器如正统IE9会报"无效参数"错误 document.body.appendChild(email); 可以看到，IE10↘IE8， [type=email] CSS属性选择器作用了，HTML代码也是 type="email" 了：
您可以狠狠地点击这里： DOM 创建示意demo
但是，在实际使用中，表单元素不可能通过JS DOM创建（注意，innerHTML注入 <input type="email"> 是无效的！），因此，这个方法只可远观而不可亵玩焉。
或者，如下比较蛋疼的后知后觉做法：
在书写HTML的时候，我们不是 type="email" 而是 type="email " ， 在后 面（或前面）键入一个空格（或其他非单词字符）。上面已经提过了， email 会被阉割成 text ，但是， email+空格 却不会。
因此，如下HTML代码：
<id="email" type="email " />
然后，如下JS代码：
var email = document.getElementById("email"); try { email.type = email.type.replace(//s+$/, ""); } catch(e) {} 结果：
您可以狠狠地点击这里：后期trim type效果demo
看上去还不错。但是，部分IE浏览器是不允许 type 类型的 改变 的，因此，上面的做法只能是部分修复—— 不过 好在的是IE10以及其他现代浏览器（支持HTML5表单元素的）都是支持这种修复的。
因此：
不影响 支持HTML5表单的浏览器的原生使用 蛋疼的IE10向下兼容以及其他IE浏览器可以 知道 这个是 email 类型输入框（ 简单 trim 下即可）五、希望啊希望
据说IE10是自动升级的，我就希望，过个个把月，IE10把这个糟糕的bug给修复了，我还可以可以给他说两句好话，否则，我没事就拿IE10吐槽！
目前而言，如果您遇到这个问题，最好的做法是： 什么也 不用 做！
没有什么好的修复方法！加上使用IE10浏览器的人国内并不多，加上使用IE10兼容模式的也不多，因此，先忽略这个让人吐血折寿的问题吧，该喝咖啡的和咖啡，该刷 微博 的刷微博……
如果您实在想做点什么，试试在头部加上这个meta 源 信息吧（并不推荐）：
< ;m eta http-equiv="X-UA-Compatible" content="IE= Edge " />
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-残忍：IE10↘IE7-IE9 type=email的完全抛弃 全部内容，希望文章能够帮你解决 html5教程-残忍：IE10↘IE7-IE9 type=email的完全抛弃 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-残忍：IE10↘IE7-IE9 type=email的完全抛弃的详细内容...