對從事web開發的朋友來講，低版本的永遠是一個痛點，不支持最新技術(如css3,html5)。

在現在web開發中使用圖標字體已經很廣泛，如Font Awesome,Bootstrap等，字體圖片主要是通過css選擇器before,after結合content來實現，但是在低版本的IE6/IE7/IE8中并不支持，下面就來探討一下如何解決IE6/IE7/IE8不支持before,after問題。

先來看一個例子

這里重點演示IE6中效果，因為只要IE6實現的效果，更高版本的IE一般都可以實現。

devdo

在chrome，firefox，opera中的顯示結果為

在IE6中顯示結果為

從上面的例子看出，IE6并不支持before、after，那么要如何讓IE6支持呢，通常的方法是通過腳本來實現，jquery.pseudo.js就是用于解決IE6不支持before、after的一個方法。

使用方法

一、引入jquery，引用jquery.pseudo.js

二、修改css

在你需要使用的html標簽中加入before，after屬性。

如通常p:before{content: “before”;}，要在p標簽中加入{before: ‘before';after: “after”;}，如不明白請看下面示例代碼。

p:before,p {

content: "before";

before: 'before';

}

p:after,p {

content: "after";

after: "after";

}

devdo

在chrome，firefox，opera中的顯示結果為

在IE6中顯示結果為

在IE6中的before，after已經顯示出來，但是其中before后的空格沒有體現出來，這個你可以通過before: “before “;后面加個空格來處理。

現在IE6已經實現before，after已經實現效果，有些同學就要問了，那圖標字體呢，如何實現。

我們就拿大名鼎鼎的font-awesome來舉例。

一般情況你只需要把font-awesome的類插入css中即可實現，但是對IE6這種奇葩，我們要多走一步。

通過chrome，firefox等瀏覽器的審核元素功能，查找圖標字體的content值，如下圖。

我這里是微博圖標，content值是”\f18a”，把需要使用的標簽中加入before:”\f18a”，如下面i標簽p i{before:”\f18a”;}，全部示例看下面代碼。

devdo

在chrome，firefox，opera中的顯示結果為

在IE6中顯示結果為

現在IE6的圖標字體也實現了，更多功能等你發現。

下載jquery.pseudo.js

轉載請注明：前端錄?解決IE6/IE7/IE8不支持before,after問題

總結

以上是生活随笔為你收集整理的html不支持ie7,解决IE6/IE7/IE8不支持before,after问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。