摘要：在对我们的项目进行一些在中的基本功能测试时，发现以下两个问题对使用时出现错误。的在中表现诡异在一个盒子中有多个子盒子，父子级都具有属性，子级的层级并没有按照的数值排列。公司开发们用的是，所以测试这个的时候把他的老年机带了过来。
在对我们的PC项目进行一些在IE10中的基本功能测试时，发现以下两个问题:
1. 对canvas使用toDataURL时出现 "SCRIPT5022: SecurityError" 错误。
2. css的z-index在IE10中表现诡异(在一个盒子中有多个子盒子，父子级都具有position属性，子级的层级并没有按照z-index的数值排列)。
公司开发们用的是Mac，所以测试这个的时候leader把他的老年机带了过来。测试的环境是win8+360安全浏览器，选择360的兼容模式，F12打开调试面板，调试面板的选项中还可以选择IE版本。页面路由跳转时控制台elements表现为html为空，有个双箭头的图标点击可以使控制台载入当前页面资源。
解决方案
IE10中的canvas在导出图像数据时因为图像的跨域而产生的安全性错误,以下是国际论坛上的解决方案
https://stackoverflow.com/que...
https://stackoverflow.com/que...
通过XMLHttpRequest可以解决这个问题，以下是代码
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var url = URL.createObjectURL(this.response);
img.src = url;
// here you can use img for drawing to canvas and handling
// don"t forget to free memory up when you"re done (you can do this as soon as image is drawn to canvas)
URL.revokeObjectURL(url);
};
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.send();
这个问题出现在上传图片时，如下的这种设计体验
一个input放在最上边，值得注意的是在IE中input的type为file的表现为左半部分点击为选中并显示光标，而点击有半部分才为选择文件操作，所以外套label来触发input的事件，而把input定位在区域外使其无法被选中。呀，扯到别处了。说那个层级问题。当时忘记截图了，将就着看吧。
从上到下有三个子级，分别为label,p,img，层级则是由大到小，但是label在360中检查元素却无法被直接选中，多层时直接选中的层为较高层，所以也就点击不到。哪位coder知道问题所在的希望可以不吝赐教，而我最后给我的解决方案是给label的样式中加入background: rgba(0, 0, 0, 0.02);，很神奇呢，偶然发现的，而且用transparent不行。
好了，废话不多说，就这么多了。碰到过同类问题的coder，如果知道详细的原因或者有更好的方案希望可以告知，先行感谢。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116648.html
摘要：在对我们的项目进行一些在中的基本功能测试时，发现以下两个问题对使用时出现错误。的在中表现诡异在一个盒子中有多个子盒子，父子级都具有属性，子级的层级并没有按照的数值排列。公司开发们用的是，所以测试这个的时候把他的老年机带了过来。 在对我们的PC项目进行一些在IE10中的基本功能测试时，发现以下两个问题: 1. 对canvas使用toDataURL时出现 SCRIPT5022: Secur...
摘要：使用来移除事件，参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中，绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。 JavaScript中几个最重要的大知识点 面向对象 DOM事件 异步交互ajax 事件 事件就是文档和浏览器的瞬间交互行为 1.事件类型 点击: click 滚轮: scroll 滑动: move 进入: enter 加载: load ...
摘要：前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是用来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。 前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。部分代码如下： var testVideo = document....
摘要：前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是用来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。 前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。部分代码如下： var testVideo = document....
摘要：前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是用来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。 前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。部分代码如下： var testVideo = document....
阅读 1380·2021-11-23 09:51
阅读 970·2021-10-12 10:12
阅读 679·2021-10-12 10:12
阅读 2601·2021-09-22 16:06
阅读 3426·2019-08-30 15:56
阅读 3187·2019-08-30 15:53
阅读 2973·2019-08-29 16:29
阅读 2242·2019-08-29 15:27
