Web Developers : 真的再見了 , IE !

時間 2021-05-25

標籤 javascript css html 前端 html5 java 後端瀏覽器安全網絡欄目 HTML 简体版

原文原文鏈接

寫在開頭

最近一個關於微軟的新聞吸引了我，據報道：javascript

微軟公司5月19日宣佈，從明年6月15日起，IE瀏覽器將基本淘汰，標誌着又一款數字產品將退出歷史

IE瀏覽器的歷史

Internet Explorer（簡稱：IE）是微軟公司推出的一款網頁瀏覽器。原稱Microsoft Internet Explorer（6版本之前）和Windows Internet Explorer（七、八、九、十、11版本）。在IE7之前，中文直譯爲「網絡探路者」，但在IE7之後官方便直接俗稱"IE瀏覽器"。
2015年3月微軟確認將放棄IE品牌。轉而在Windows 10上，用Microsoft Edge取代了Internet Explorer。
2016年1月12日，微軟公司宣佈於這一天中止對Internet Explorer 8/9/10三個版本的技術支持，用戶將不會再收到任何來自微軟官方的IE安全更新；做爲替代方案，微軟建議用戶升級到IE 11或者改用Microsoft Edge瀏覽器。
2020年8月18日消息，微軟服務將告別其古老的IE瀏覽器，在2021年8月17日中止微軟365應用程序的IE 11支持。微軟也將在2021年3月9日結束對其legacy Edge瀏覽器的支持。

IE爲何會這麼堅挺

1.國內不少老而大的項目，在前些年對兼容性要求高，不少前端項目仍是混編，用的JQuery這些庫開發,大到不能倒，重構難度大，且對於一些項目來講重構的投入與回報不成正比（老闆說：我反正能用啊...等等），加上有可能就是外包寫的，寫完跑路了。
2.不思進取，不少管理人員，對於技術長期停滯，無所謂的態度，特別是一些旱澇保收性質的部門，用着客戶就用的IE瀏覽器啊..這種幌子一糊弄就是幾年
3.客戶自己有問題，缺少教育，IE必定比谷歌瀏覽器安全嗎？這裏給個問號，可是IE相對封閉，不少API和權限接口開放沒有那麼多，開發效率和產品最終實現效果都會打折扣，性能也是會差很多。你就裝一個谷歌瀏覽器也不會掛的
4.敏感性質的客戶，例如軍工國防敏感部門的，不敢在電腦上安裝其餘軟件，只敢用自帶瀏覽器IE，那麼此次會完全解決，使用自帶的Microsoft Edge.

IE細數N宗罪

隨便百度一篇文章，就會出來幾十條，例如:css

1、CSS常見問題

一、H5標籤兼容性

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

二、元素浮動以後，能設置寬度的話就給元素加寬度，若是須要寬度是內容撐開的，就給它裏邊的塊元素加上浮動float:left;

三、第一塊元素浮動，第二塊元素加margin-left值等於第一塊元素寬度，在IE6下會有間隙問題

　　解決方案：不要用margin-left，給兩個元素都加上浮動float:left;

四、IE6下子元素超出父級寬高，會把父級寬高撐開，好比用於放置輪播的ul寬度會超出父元素

　　解決方案：不要讓子元素的寬高超過父級

五、P包含塊元素嵌套規則

　　牢記規則：p、h標籤不能嵌套塊元素

2、CSS兼容性問題

一、margin兼容性問題

　　1）margin-top傳遞，子元素上下margin會傳遞給父級

　　阻止：觸發BFC（如overflow:hidden;拯救標準瀏覽器及IE78）、觸發IE的haslayout  zoom:1（拯救IE67）;

　　2）上下margin疊壓（觸發條件：同級元素，第一個元素的下與第二個元素的上會疊壓在一塊兒）

　　解決方案：兩個元素分開設置margin，而後儘可能使用同一方向的margin，好比margin-top

二、display:inline-block; 　　塊元素變爲內聯塊， IE67不兼容；內聯元素變爲內聯塊，全部瀏覽器都支持

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

　　發現問題：固然，變爲內聯塊後，有一個特性就是若是元素換行，在頁面上元素之間就會有空隙的，空隙大小爲一個空格的像素大小。

三、IE6元素最小高度爲19px

　　解決方案：overflow:hidden;

四、IE67雙邊距，當元素浮動後，再設置margin，那麼就會產生雙倍邊距

　　解決方案：針對IE67，添加*display:inline;樣式，好比頁面上橫向排列的幾組塊，會常常遇到

五、li裏元素都浮動，在IE67下方會產生4px間隙問題

　　解決方案：針對IE67，添加*vertical-align:top;樣式

六、IE6下，兩個浮動元素之間有註釋或者內聯元素而且和父級寬度相差不超過3px，會致使多複製一些文字問題

　　解決方案：1）兩個浮動元素之間避免出現內聯元素或者註釋

　　　　　　　2）與父級寬度相差3px或以上　　

七、IE67父級元素的overflow:hidden;子元素設置position:relative後，就包不住子元素了

 　　解決方案：針對IE67，給父級元素添加position:relative;

八、IE6下絕對定位元素父級寬高是奇數，絕對定位元素的right和bottom值會有1px的誤差

 　　解決方案：避免父級寬度出現奇數

九、IE6下絕對定位元素和浮動元素並列絕對定位元素消失

 　　解決方案：浮動元素和絕對定位元素時同級的話，定位元素就會消失，只要讓它們兩個不處於同級就能夠避免這個bug了

十、IE6下input的空隙

 　　解決方案：針對IE67，給input元素添加*float:left;

十一、IE6下輸入類型表單控件背景問題，背景不固定，滾動了

　　解決方案：設置background-attachment:fixed;

十二、line-height　　在IE6七、FF下不兼容，會有幾個像素的誤差，目測只有IE8和其餘標準瀏覽器正常

　　IE6下，想給給圖片設置line-height來達到垂直居中效果是實現不了的，就給img標籤單獨設置{float:left;postion:relative;top:...}

　　固然，文本的line-height仍是識別的

1三、常見文章列表佈局：標題+發佈日期　　

　　<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>

1四、遮罩彈窗

　　標準 不透明度：opacity:0~1

　　IE678濾鏡：filter:alpha(opacity=0~100);

1五、<a>的手形光標

　　標準瀏覽器下，不須要設置也有

　　IE6下沒有，就給a{cursor:pointer;}

1六、<a>的 text-decoration:none;

　　標準下，只需 a {text-decoration:none;}

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

3、CSS hack

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

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

_　　  IE6　　　　　　例如：_background:green;

 

4、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");

　　　　　　　}

原文地址: https://www.iefans.net/dibanb...

咱們想一想當年的前端開發，連Ant-Design都沒有的時代，拿着JQuery,處理着各類頭痛的IE問題，寫着各類polyfill,就會感慨，這是一個好的時代，各類技術百花齊放，輪子滿天飛...

接下來應該作什麼

把精力放在兼容谷歌瀏覽器和Edge等主流瀏覽器上,推薦一個網站,can i use.能夠查詢各類兼容性問題的html

https://caniuse.com/
例如requestAnimationFrame
從如今開始放棄兼容IE，IE此次必定會退出歷史舞臺，不要存在僥倖心理，要教育客戶，讓他們有感知的逐步退出使用IE
抓緊新技術的學習，將來的前端，技術必定會比如今還要多，完全丟下IE這個包袱之後，能夠說是一隻狂奔的野狗,不用再關心兼容性問題，創新性的庫和框架必定會遍地開花