Written in the beginning

  • A recent piece of news about Microsoft caught my eye. It was reported that:

Microsoft announced on May 19 that Internet Explorer will be largely phased out by June 15 next year, marking the end of yet another digital product

The history of Internet Explorer

  • Internet ExplorerInternet Explorer (IE for short) is a web browser launched by Microsoft. Formerly known as MicrosoftInternet Explorer(pre-version 6) andWindows Internet Explorer(Version 7, 8, 9, 10, 11). Before IE7, The Chinese literal translation is “network pathfinder”, but after IE7, the official will be directly known as “IE browser “.
  • In March 2015, Microsoft confirmed that it would drop the IE brand. Turn on theWindows 10withMicrosoft EdgeTo replace theInternet Explorer.
  • On January 12, 2016, Microsoft announced that it would stop operating on that dateInternet Explorer 8/9/10Three versions of technical support, users will no longer receive any official IE security updates from Microsoft; Instead, Microsoft advised users to upgrade to Internet Explorer 11 or switch to Microsoft Edge.
  • Microsoft Services will bid farewell to its ancient Internet Explorer browser, discontinuing IE 11 support for Microsoft 365 apps 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 requirements for compatibility in previous years, and many front-end projects are still mixed and usedJQueryThese libraries are too big to fail, difficult to refactor, and for some projects the cost of refactoring is disproportionate (boss: I can use it anyway… And so on), plus there is a possibility that it is written by outsourcing, finished writing run away.
  • 2. Do not try to make progress, many managers, for the long-term stagnation of technology, indifferent attitude, especially some of the drought and flood protection nature of the department, use the Internet Explorer browser used by customers. Such pretence was fudged for years
  • 3. The clients have problems and lack of education. Is IE safer than Google browser? There is a question mark here, but IE is relatively closed, many API and permission interface is not so much open, development efficiency and product final implementation effect will be compromised, performance will also be poor. You can install chrome and it won’t die
  • 4. Sensitive customers, such as those in military and defense sensitive departments, dare not install other software on their computers and only dare to use their own browser, IE. Then this time they will completely solve the problem and use their own browserMicrosoft Edge.

IE enumerates N deadly SINS

  • Random Baidu an article, will come out dozens, such as:
1. H5 Label Compatibility Solution: < script SRC = "http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > 2, after the floating element, can set the width of the element to add width, if you need the width is propped open with content, Float :left; float:left; Float the first element and add a margin-left value to the second element to equal the width of the first element. 4, IE6 subelements that exceed the width and height of the parent will split the width and height of the parent element, such as ul used to place the rotation will exceed the width and height of the parent element 1) margin-top pass, child element upper and lower margin will be passed to the parent prevent: trigger BFC (e.g. Overflow :hidden; Save the standard browser and IE78), trigger IE hasLayout Zoom :1 (save IE67); 2) Margin overlay (trigger condition: sibling elements, the bottom of the first element and the top of the second element overlap) solution: Set the margin of the two elements separately and try to use the same margin as possible, such as margin-top 2, display:inline-block; Block elements become inline blocks that are incompatible with IE67. Inline elements become inline blocks and all browsers support the solution: {display:inline-block; *display:inline; *zoom:1; } Find the problem: of course, one of the features of the inline block is that if the element is wrapped, there will be a gap between the elements on the page, the size of a space pixel. 3, IE6 element minimum height 19px For IE67, add *display:inline; for IE67, add *display:inline; *vertical-align:top; *vertical-align:top; *vertical-align:top; In IE6, there are comments or inline elements between two floating elements and the width difference between the two floating elements is not more than 3px, causing more text to be copied. 1) Avoid inline elements or comments between two floating elements. 2) The width difference from the parent is 3px or more. Solution: For Internet Explorer 67, add position:relative to the parent element. In IE6, the width and height of the absolute positioning element are odd, and the right and bottom values of the absolute positioning element will have 1px deviation. Float :left; float:left; float:left; float:left; float:left; float:left 11, IE6 under the input type form control background problem, background is not fixed, scroll solution: set background-attachment:fixed; 12, Line-height is not compatible with IE67, FF, and can vary by several pixels. If IE8 is not compatible with IE6, it is impossible to set line-height to achieve vertical center effect. Just set the img tag separately {float:left; postion:relative; top:... } Of course, the line height of the text is still recognized. <span style="float:right">2015-07-17</span></li> <li> <span style="float:right">2015-07-17</span></li> < ul> <ul> <li><span style="float:right"> <span style="float:right">2015-07-17</span> </li> <span style="float:left"> <span style="float:right">2015-07-17</span style="float:left"> </span><span style="float:right"> </span></li> </ul> filter:alpha(opacity=0~100); <a> cursor; IE6 < A > cursor; } 16, <a> text-decoration:none; A {text-decoration:none; } IE6下, a {text-decoration:none; } and a:hover {text-decoration:none; } 3, CSS hack IE67 8-10 e.g. : background:blue; +*IE67 for example: * BACKGROUND :yellow; +background:yellow; _ IE6 Example: _background:green; </body> </body> </body> <! --[if IE 6]> <script SRC =" dd_belatedpng_0.0.8 a.js" type="text/javascript"></script> <script> DD_belatedPNG. Fix (" * "); </script> <! [endif]--> 2) Native filter, add the following style to the tag of the background image, such as body body {_background-image:none; _filter: progid: DXImage Transform. Microsoft. AlphaImageLoader, (SRC = "XX. PNG, sizingMethod =" crop "); }Copy the code

Original address :www.iefans.net/dibanben-ie…

  • Let’s think about front-end development back in the dayAnt-DesignNo era, with JQuery, dealing with all kinds of headache IE problems, writing all kinds ofpolyfill, will say, this is a good era, all kinds of technology bloom, wheels flying…

What should I do next

  • Focus on compatibility with major browsers like Google Chrome and Edge, recommend a site,can i use. Can query various compatibility problems

caniuse.com/

  • For example,requestAnimationFrame

  • From now on to give up compatible with IE, IE this time will withdraw from the stage of history, do not have a fluke psychology, to educate customers, let them have a perception of the gradual withdrawal from the use of IE
  • Grasp the study of new technology, the front end of the future, technology will be more than now, after completely leaving IE this burden, can be said to be aA wild dog running wildInstead of worrying about compatibility, innovative libraries and frameworks are bound to proliferate

Tell a joke

  • Xiao Wang and Xiao Ming graduated from the same computer major. When they graduated, Xiao Wang worked in the front end and Xiao Ming worked in the back end. After one year of work, they agreed to resign and went to travel for half a year

If you find this article inspiring, I’d like to invite you to do me three small favors:

Click “watching”, so that more people can see this content.

Pay attention to the public account “front-end peak”, share original knowledge from time to time.

Look at other articles as well