ie | 易学教程

IE10无法识别setPrototypeOf属性问题

阅读更多关于 IE10无法识别setPrototypeOf属性问题

项目遇到一个需求，React16.6.0兼容IE10浏览器首先在IE浏览器打开，IE11可以支持，打开控制台切换到IE10，页面白屏，控制台报错。控制台报错 Map Set 未定义既然没有定义，说明IE10不支持ES6最新语法。谷歌了好多方案。唯一有用的还是去了Babel官网，有关，@babel/polyfill的使用，以及它代表着什么？之前用到了babel-polyfill,发现都是2017年的答案，现在库早就更新了，对于第一次听到这个库的人来说，未免不知所以然。于是照着babel/polyfill官网所说去webpack.cong.dev.js的entry去配置了 entry : ["@babel/polyfill"] 结果出了其它错误，是自己引用别人第三方库的问题。 [Purchameng](valid Defined ) 此命令不支持又去谷歌，索到，有人在github提问了，说使用的quill插件不支持IE10,得换插件。那好，就注释了项目所用的quill引用果然IE10可以展示页面了。这中间跳了很多过程和解决问题的心理活动。需要慢慢梳理。来源： https://www.cnblogs.com/baimeishaoxia/p/11825483.html

CSS的优先级理解

阅读更多关于 CSS的优先级理解

样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style 有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下： < head > <style type="text/css"> /* 内部样式 */ h3 { color : green ; } </style>  < link rel = " stylesheet " type = " text/css " href = " style.css " / >  < /head > < body > < h3 > 测试！ < /h3 > < /body > 选择器的优先权解释： 1. 内联样式表的权值最高 1000； 2. ID 选择器的权值为 100 3. Class 类选择器的权值为 10 4. HTML 标签选择器的权值为 1 利用选择器的权值进行计算比较，示例如下： < html > < head > <style type=

在IE、Gecko、WebKit下执行execCommand的常用效果差别。

阅读更多关于在IE、Gecko、WebKit下执行execCommand的常用效果差别。

我们经常会用到 bSuccess = object .execCommand( sCommand [ , bUserInterface ] [ , vValue ] ) 方法去处理Html数据。具体参见 http://blog.csdn.net/chajn/archive/2010/10/25/5963696.aspx 但是另我们头疼的是它在各浏览器内核下生成的代码不同，导致了在兼容性上效果和数据的缺失。下面是常见数据处理的几个不同之处。字体大小 FontSize 粗体 Bold 颜色 ForeColor 下划线 Underline 斜线 Italic 左中右 JustifyLeft JustifyCenter JustifyRight 列表模式 InsertOrderedList InsertUnorderedList 缩进 Indent Outdent IE <font size="7"></font> <STRONG></STRONG> <FONT color=#1ea535></FONT> <U></U> <EM></EM> <P align=left></P> <P align=center></P> <P align=right></P> <OL><LI></LI></OL> <UL><LI></LI></UL> <BLOCKQUOTE style="MARGIN

浏览器兼容

阅读更多关于浏览器兼容

Normalize.css 不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.css <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">复制代码简单粗暴法 * { margin: 0; padding: 0; }复制代码 html5shiv.js 解决 ie9 以下浏览器对 html5 新增标签不识别的问题。 复制代码 respond.js 解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>复制代码 picturefill.js 解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题 <script src=

低版本IE中CSS的bug之源“haslayout”

阅读更多关于低版本IE中CSS的bug之源“haslayout”

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性

认识hasLayout——IE浏览器css bug的一大罪恶根源

阅读更多关于认识hasLayout——IE浏览器css bug的一大罪恶根源

什么是hasLayout ？ hasLayout 是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的 hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。下列元素默认 hasLayout=true <table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee> 很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。 hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。 ------------------------------------- display 启动haslayout的值:inline-block 取消hasLayout的值:其他值 ------------------------------------

JS使用getComputedStyle()方法获取CSS属性值

阅读更多关于 JS使用getComputedStyle()方法获取CSS属性值

下面这个函数，能够获取一个元素的任意 CSS 属性值。 function getStyle(element, attr) { if(element.currentStyle) { return element.currentStyle[attr]; } else { return getComputedStyle(element, false)[attr]; } } 比如，本例中如果想获得 lists 的 left 属性值，只需要 getStyle(lists,"left") JS使用getComputedStyle()方法获取CSS属性值在对网页进行调试的过程中，经常会用到js来获取元素的CSS样式，方法有很多很多，现在仅把我经常用的方法总结如下： 1. obj.style：这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属性。代码如下: 1 <html xmlns=”http://www.w3.org/1999/xhtml“> 2 <head> 3 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 4 <title>JS获取CSS属性值</title> 5 <style

IE浏览器如何实现断点续传

阅读更多关于 IE浏览器如何实现断点续传

需求：支持大文件批量上传（20G）和下载，同时需要保证上传期间用户电脑不出现卡死等体验；内网百兆网络上传速度为12MB/S 服务器内存占用低支持文件夹上传，文件夹中的文件数量达到1万个以上，且包含层级结构。支持PC端全平台操作系统，Windows,Linux,Mac 支持文件和文件夹的批量下载，断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。支持文件夹批量上传下载，服务器端保留文件夹层级结构，服务器端文件夹层级结构与本地相同。支持断点续传，关闭浏览器或刷新浏览器后仍然能够保留进度。支持文件夹结构管理，支持新建文件夹，支持文件夹目录导航交互友好，能够及时反馈上传的进度；服务端的安全性，不因上传文件功能导致JVM内存溢出影响其他功能使用；最大限度利用网络上行带宽，提高上传速度；分析：对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传从上传的效率来看，利用多线程并发上传能够达到最大效率。解决方案：文件上传页面的前端可以选择使用一些比较好用的上传组件，例如百度的开源组件WebUploader，泽优软件的up6，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图，甚至是大文件断点续传，大文件秒传。

Ajax里的 XMLHttpRequest对象

阅读更多关于 Ajax里的 XMLHttpRequest对象

XMLHttpRequest 对象是AJAX功能的核心，要开发AJAX程序必须从了解XMLHttpRequest 对象开始。了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始，在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法：先看看IE创建XMLHttpRequest 对象的方法（方法1）： var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP） var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法（方法2）创建XMLHttpRequest 对象： var xmlhttp = new XMLHttpRequest(); 实际上Internet Explorer 使用了一个名为 XMLHttp 的对象，而不是 XMLHttpRequest 对象，而 Mozilla、Opera、Safari 和大部分非 Microsoft 浏览器都使用的是后者（下文统称

div样式在IE下margin:0 auto不居中多种解决方法

阅读更多关于 div样式在IE下margin:0 auto不居中多种解决方法

正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。正常情况下需要将div居中显示时，使用Css样式: margin:0 auto 即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。如下代码: XML/HTML Code 复制内容到剪贴板 < style type = "text/css" > #con{width:980px;martin:0 auto;} </ style > < div id = "con" > margin: 0 auto 内容居中显示 </ div > 解决方法一可以是对网页主体<body>声明文本居中，即body{text-align:center} 即: XML/HTML Code 复制内容到剪贴板 < style type = "text/css" > body{text-align:center} #con{width:980px;martin:0 auto;} </ style > < div id = "con" > margin: 0 auto 内容居中显示 </ div > 解决方法二其实和解决方法一差不多，只是在要居中的div外层添加多一个div

订阅 ie