2. 程式人生 > >IE8適配總結（一）

IE8適配總結（一）

阿新 • • 發佈：2019-01-28

前端的適配主要包括各個瀏覽器和不同版本之間的適配，重點考慮IE8，所以這裡總結幾個目前知道的IE8適配方面的知識。

HTML5新標籤

很多HTML5新增的標籤在IE8中都不支援，比如header、section、footer等。
例如下面在html檔案中簡單的使用上面提到的這幾個標籤，看下在IE8和其他版本中的效果。

html程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 

        header{
            background: yellow;
            width: 100px;
            height: 50px;
        }
        section{
            background: red;
            width: 100px;
            height: 100px;
        }
        footer{
            width: 100px;
            height: 50px;
            background
 
: aquamarine;
        }
    </style>
</head>
<body>
    <header>
        this is header
    </header>

    <section>
        this is section
    </section>

    <footer>
        this is footer
    </footer>
</body>
</html>

在IE9中的效果如下：
這裡寫圖片描述

在IE8中的效果如下：
這裡寫圖片描述

可以看到這幾個標籤在IE8中並沒有效果，因為IE8對它們不提供支援。

flex佈局

flex和之前Android用到的佈局方式很相似，所以理解起來很簡單，但因為很多不支援，所以 就很少使用了。還是通過程式碼來看下在IE8下的效果。

html程式碼：

<div style="display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: red">
    <div style="width: 50px;height: 50px;background: aquamarine">1</div>
    <div style="width: 50px;height: 50px;background: yellow">2</div>
    <div style="width: 50px;height: 50px;background: mediumvioletred">3</div>
</div>

在IE10和IE8中的的效果分別如下：
這裡寫圖片描述

這裡寫圖片描述

可以看出flex佈局在IE8 甚至IE9中都不支援的。

rgba

rgba（255，255，255，0.5）這樣的半透明設定在IE8中也是不生效的。

CSS3新特性

如 border-radius這種設定圓角非常方便的也不支援

@media媒體查詢

IE8完全不支援媒體查詢，但可以通過respond.js檔案使其支援。具體使用方式：

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->

為IE8單獨設定CSS檔案

為IE8單獨編寫CSS檔案然後引入 ：

<!--[if lt IE 8]><link rel="stylesheet" href="../css/indexforie.css"/><![endif]-->

相關推薦

IE8適配總結（一）

前端的適配主要包括各個瀏覽器和不同版本之間的適配，重點考慮IE8，所以這裡總結幾個目前知道的IE8適配方面的知識。 HTML5新標籤 很多HTML5新增的標籤在IE8中都不支援，比如header、section、footer等。 例如下面在html檔案

IOS7 相容適配總結（一）

 判斷執行時方法： - (BOOL)respondsToSelector:(SEL)aSelector; 例如： Java程式碼   if ([self respondsToSelector:@selector(setEdgesForExtendedLayout:)])   {       

Android通知欄介紹與適配總結（上篇）

此文已由作者黎星授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 由於歷史原因，Android在釋出之初對通知欄Notification的設計相當簡單，而如今面對各式各樣的通知欄玩法，谷歌也不得不對其進行更新迭代調整，增加新功能的同時，也在不斷地改變樣式，試圖迎合更多

java_web項目開發經驗總結（一）

從數據 簡單 處理 開發 事務 傳輸 記錄 承載 基礎上 　　web項目就像一個動態的記事本，功能很強大，你最初的項目功能調研越給力，項目所能發揮的作用也就越給力。這是因為web網絡的強聯系性，大家都可以通過訪問到自己想要訪問的頁面，頁面裏既可以承載信息，也可以承載做事情的

文檔總結（一）——文檔的概述

理解 需要 軟件需求 是否 研究 strong 開發項目 問題 項目開發 寫完文檔後，本來想寫一篇具體的文檔的總結的，後來看大家都寫的具體文檔總結，於是我就想：我還是寫一些跟大家不一樣的東西吧。 所以，我就說說我對各個文檔的宏觀理解吧。

salesforce零基礎學習（七十二）項目中的零碎知識點小總結（一）

gin 不同 grant dmi ima -m ron 角色 com 項目終於告一段落，雖然比較苦逼，不過也學到了好多知識，總結一下，以後當作參考。 一.visualforce標簽中使用html相關的屬性使用 曾經看文檔沒有看得仔細，導致開發的時候走了一些彎路。還好得到

OpenGL在MFC中的使用總結（一）——基本框架

palette 接受 white 要求 無效 結構 del 一次 是你 項目中要畫3D顯示的模型，於是要用到OpenGL,加上是在MFC中，並且是在MFC中的ActiveX中使用。再並且鑒於他們程序主框架的設定。常規的方法還不一定能實現。所以還是查過不少資料，在此一一總

操作系統基礎知識總結（一）

一個 快速 會有 處理死鎖 b2c fcm 死鎖 空間 存儲系統 1. 進程和線程的區別 進程 進程，即正在運行的程序，程序從硬盤載入到內存就變成進程。進程是資源的擁有者，每個進程都擁有著自己的內存空間與多個線程。 線程 線程是指令的執行者，是計算機執行指令的基本單元，一個

react native 知識點總結（一）

修改 ltp 組件 改變 set 覆蓋 sta 一個 個數 一、關於react native 版本的升級 參照文檔：http://reactnative.cn/docs/0.45/upgrading.html react-native -v

SEO總結（一）

.com http 分享 com ima 技術 wid -1 ges SEO總結（一）

js基本語法總結（一）

向上取整 取余 轉字符串 結果 lin ase 調試 錯誤 進行 1.js簡介 a）js是一種網頁腳本語言，使得瀏覽器可以與網頁互動。 js的一種基於對象和事件驅動，具有安全性能的腳本語言，腳本語言就是在客戶端的瀏覽器就可以互動響應處理程序的語言，而不需要服務器的處理和響應

JSON必知必會學習總結（一）

tor lint 沒有 script app 對數 數據交換格式 object 什麽 七月第一周，從學校畢業回來上班的第一周。離開一段時候後，再次回來重新工作，有了很多新的認識，不再是實習時那麽混混沌沌了。每天我自己該做什麽，怎麽做，做到什麽程度更清晰了。除了要去完成我負責

PHP學習總結（一）

encode 什麽 code 解決 new span att 面向對象 反斜杠 》PHP 面向對象 使用parent訪問父類的構造方法（__construct）時一定要為當前類繼承要訪問的構造方法 類的構造方法（__construct）在實例化時直接被加載，靜態方法

python初步——基礎總結（一）

python 自動化運維一. 第一個HelloWorld 1. 在linux 執行 （python2.7）[[email protected]/* */ ~]# vim test.py #!/usr/bin/env python

Java IO學習總結（一）

file flush writer directory 創建 str java 資源 tab 一、File 類 Java中不管文件還是目錄都可以使用File類操作，File能新建、刪除、重命名文件和目錄，但是不能訪問文件內容本身，訪問文件內容需要使用輸入輸出流。 Fi

mybatis總結（一）

tran default led sqlserver insert cto src 結果集 obj MyBatis 是支持普通 SQL查詢，存儲過程和高級映射的優秀持久層框架。MyBatis 消除了幾乎所有的JDBC代碼和參數的手工設置以及結果集的檢索。MyBatis 使用

ＳＳＦ項目總結（一）

變更 可能 檢測 說服力 結果 項目 總結 實時監控 毫無 作為項目經理，在把握需求變更上需要有高度的敏感，作為一個檢測器，實時監控，項目過程中與客戶方溝通的任何細小的變更，都應該記錄在案，同時 抄送給客戶方，註意這裏抄送給客戶方一定要做，目前項目上吃虧的地方有： １，有的

pictureBox使用總結（一）

放大 nbsp 上進 顯示 box 計算 有一種 繪圖 驗證 問題： 1、pictureBox在上面圈住部分區域時，鼠標的移動事件，像素的變化，會觸發繪圖層的重繪事件，當繪圖數據量極大時，效率是一個必須重視的問題 2、兩個pictureBox可以重疊？一個透明，一個不透明。

半斤八兩中級破解總結（一）

記錄 添加 要求 傳遞 參數傳遞 bat 文件 一鍵安裝 安裝 本課主要介紹了三個工具，分別是AspWebServer， Phpnow和Wireshark 　AspWebServer: 　　這個很簡單，直接運行 安裝.bat，這個bat很小，前面都是關於作者的信息，

[轉載] java多線程總結（一）

span 創建方式 stop interface 同步 存在 wid 實現類 running 轉載自：http://www.cnblogs.com/lwbqqyumidi/p/3804883.html 作者：Windstep 多線程作為Java中很重要的一個知識點，在此