Web Developers: Goodbye, IE!

Write at the beginning

• A recent news about Microsoft attracted me. According to reports:

Microsoft announced on May 19 that from June 15 next year, IE browser will be basically eliminated, marking another digital product will withdraw from history

The history of IE

• Internet Explorer (abbreviation: IE) is a web browser launched by Microsoft. Originally called Microsoft Internet Explorer (version 6 before) and Windows Internet Explorer (version 7, 8, 9, 10, 11). Before IE7, Chinese was literally translated as "Network Pathfinder", but after IE7, it was directly commonly known as "IE Browser".
• In March 2015, Microsoft confirmed that it would abandon the IE brand. Windows 10 to Microsoft Edge replace Internet Explorer with 060b36934caadb.
• On January 12, 2016, Microsoft announced that it would stop Internet Explorer 8/9/10 on this day. Users will no longer receive any official IE security updates from Microsoft; as an alternative, Microsoft recommends that users upgrade to IE 11. Or use the Microsoft Edge browser instead.
• On August 18, 2020, Microsoft Services will bid farewell to its ancient IE browser and stop IE 11 support for Microsoft 365 applications on August 17, 2021. Microsoft will also end support for its legacy Edge browser on March 9, 2021.

---

Why is IE so strong

• 1. Many old and large projects in China have high compatibility requirements in the past few years. Many front-end projects are still mixed. JQuery are too large to fail, and reconstruction is difficult, and for some projects The investment in refactoring is not proportional to the return (the boss said: I can use it anyway... etc.), plus it may be written outsourced, and I ran away after writing.
• 2. Not enterprising, many managers have a long-term stagnation of technology and do not care about their attitudes, especially in some departments that guarantee income from droughts and floods, they use the IE browser that customers use.. This kind of pretence has been fooled for several years
• 3. Customers have problems and lack education. Is IE necessarily safer than Google Chrome? Here is a question mark, but IE is relatively closed, many APIs and permission interfaces are not open so much, development efficiency and final product implementation effects will be compromised, and performance will be much worse. You won’t hang up even if you install a Google browser
• 4. Sensitive customers, such as those in the sensitive military industry and defense department, dare not install other software on their computers, but only use their own browser IE, then this time it will be completely resolved and use the built-in Microsoft Edge .

IE counts N crimes

• Dozens of articles will come out for a random Baidu article, for example:

一、CSS常见问题

1、H5标签兼容性

　　解决方案：<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

2、元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开的，就给它里边的块元素加上浮动float:left;

3、第一块元素浮动，第二块元素加margin-left值等于第一块元素宽度，在IE6下会有间隙问题

　　解决方案：不要用margin-left，给两个元素都加上浮动float:left;

4、IE6下子元素超出父级宽高，会把父级宽高撑开，比如用于放置轮播的ul宽度会超出父元素

　　解决方案：不要让子元素的宽高超过父级

5、P包含块元素嵌套规则

　　牢记规则：p、h标签不能嵌套块元素

二、CSS兼容性问题

1、margin兼容性问题

　　1）margin-top传递，子元素上下margin会传递给父级

　　阻止：触发BFC（如overflow:hidden;拯救标准浏览器及IE78）、触发IE的haslayout  zoom:1（拯救IE67）;

　　2）上下margin叠压（触发条件：同级元素，第一个元素的下与第二个元素的上会叠压在一起）

　　解决方案：两个元素分开设置margin，然后尽量使用同一方向的margin，比如margin-top

2、display:inline-block; 　　块元素变为内联块， IE67不兼容；内联元素变为内联块，所有浏览器都支持

　　解决方案：{display:inline-block; *display:inline; *zoom:1;}

　　发现问题：当然，变为内联块后，有一个特性就是如果元素换行，在页面上元素之间就会有空隙的，空隙大小为一个空格的像素大小。

3、IE6元素最小高度为19px

　　解决方案：overflow:hidden;

4、IE67双边距，当元素浮动后，再设置margin，那么就会产生双倍边距

　　解决方案：针对IE67，添加*display:inline;样式，比如页面上横向排列的几组块，会经常遇到

5、li里元素都浮动，在IE67下方会产生4px间隙问题

　　解决方案：针对IE67，添加*vertical-align:top;样式

6、IE6下，两个浮动元素之间有注释或者内联元素并且和父级宽度相差不超过3px，会导致多复制一些文字问题

　　解决方案：1）两个浮动元素之间避免出现内联元素或者注释

　　　　　　　2）与父级宽度相差3px或以上　　

7、IE67父级元素的overflow:hidden;子元素设置position:relative后，就包不住子元素了

 　　解决方案：针对IE67，给父级元素添加position:relative;

8、IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差

 　　解决方案：避免父级宽度出现奇数

9、IE6下绝对定位元素和浮动元素并列绝对定位元素消失

 　　解决方案：浮动元素和绝对定位元素时同级的话，定位元素就会消失，只要让它们两个不处于同级就可以避免这个bug了

10、IE6下input的空隙

 　　解决方案：针对IE67，给input元素添加*float:left;

11、IE6下输入类型表单控件背景问题，背景不固定，滚动了

　　解决方案：设置background-attachment:fixed;

12、line-height　　在IE67、FF下不兼容，会有几个像素的偏差，目测只有IE8和其他标准浏览器正常

　　IE6下，想给给图片设置line-height来达到垂直居中效果是实现不了的，就给img标签单独设置{float:left;postion:relative;top:...}

　　当然，文本的line-height还是识别的

13、常见文章列表布局：标题+发布日期　　

　　<ul>

　　　　<li>这里是文章列表标题，我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li>

　　　　<li>这里是文章列表标题2，我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li>

 　　</ul>

假设你按照以上布局，那么恭喜你，在IE67下发布日期会掉到下一行去

　　解决方案，按如下布局：　

　　<ul>

　　　　<li><span style="float:right">2015-07-17</span>这里是文章列表标题，我是奇葩的IE浏览器</li>

　　　　<li><span style="float:right">2015-07-17</span>这里是文章列表标题2，我是奇葩的IE浏览器</li>

 　　</ul>

或　

　　<ul>

　　　　<li><span style="float:left">这里是文章列表标题，我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li>

　　　　<li><span style="float:left">这里是文章列表标题2，我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li>

 　　</ul>

14、遮罩弹窗

　　标准 不透明度：opacity:0~1

　　IE678滤镜：filter:alpha(opacity=0~100);

15、<a>的手形光标

　　标准浏览器下，不需要设置也有

　　IE6下没有，就给a{cursor:pointer;}

16、<a>的 text-decoration:none;

　　标准下，只需 a {text-decoration:none;}

　　IE6下，a {text-decoration:none;}  并且 a:hover {text-decoration:none;}

三、CSS hack

\9　　 IE67  8-10　　 例如：background:blue\9;

+*　　IE67　　　　　 例如：*background:yellow;  +background:yellow;

_　　  IE6　　　　　　例如：_background:green;

 

四、png-24兼容性问题，IE6不支持

解决方案：

　　1）引用Js插件，不能处理body以上的，最好放在页面底部，这样不影响页面加载，也就是放在</body>标签上面　　

　　　　<!--[if IE 6]>

　　　　　　<script src="DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>

　　　　　　<script>

　　　　　　　　DD_belatedPNG.fix("*");

　　　　　　</script>

　　　　<![endif]-->

 

　　2）原生滤镜，给背景图所在的标签加上如下样式，比如body

　　　　body {

　　　　　　　　_background-image:none;

　　　　　　　　_filter:progid:DXImage Transform.Microsoft.AlphaImageLoader(src="XX.png",sizingMethod="crop");

　　　　　　　}

 

　　

Original address: https://www.iefans.net/dibanben-ie-jianrongxing-wenti-tuoxie/

• When we think about the front-end development of the year, when even Ant-Design did not exist, holding JQuery, dealing with all kinds of headaches in IE problems, and writing all kinds of polyfill , we will feel that this is a good era, and all kinds of technologies are blooming. The wheels fly all over the sky...

What to do next

• can i use on compatibility with mainstream browsers such as Google Chrome and Edge, and recommend a website, 060b36934cad17. You can inquire about various compatibility issues

https://caniuse.com/

• E.g. requestAnimationFrame

• Give up IE compatibility from now on. IE will definitely withdraw from the stage of history this time. Don’t be lucky. Educate customers and let them gradually quit using IE.
• be more than it is now. After completely leaving the burden of IE, it can be said to be a 160b36934cada7 wild dog running wild, no longer concerned about compatibility issues, innovative libraries and The frame will blossom everywhere

Tell a joke

• Xiao Wang and Xiao Ming also graduated from computer sciences. When they graduated, Xiao Wang went to work as the front-end and Xiao Ming went to the back-end. After a year of work, the two met and resigned. They went to travel for half a year. After the trip, Xiao Wang did not find a job anymore. , Because the front-end technology has been updated too fast in the past six months, and the previous technology is completely out of date

❤️ After watching three things
If you think this content is quite inspiring for you, I would like to invite you to do three small favors for me:

Click "Watching", so that more people can see this content (If you don't like the favorite, it's all hooligans-_-)

Follow the public "160b36934cae0e front-end pinnacle" and share original knowledge from time to time.

Also look at other articles