對(duì)從事web開(kāi)發(fā)的朋友來(lái)講，低版本的永遠(yuǎn)是一個(gè)痛點(diǎn)，不支持最新技術(shù)(如css3,html5)。

在現(xiàn)在web開(kāi)發(fā)中使用圖標(biāo)字體已經(jīng)很廣泛，如Font Awesome,Bootstrap等，字體圖片主要是通過(guò)css選擇器before,after結(jié)合content來(lái)實(shí)現(xiàn)，但是在低版本的IE6/IE7/IE8中并不支持，下面就來(lái)探討一下如何解決IE6/IE7/IE8不支持before,after問(wèn)題。

先來(lái)看一個(gè)例子

這里重點(diǎn)演示IE6中效果，因?yàn)橹灰狪E6實(shí)現(xiàn)的效果，更高版本的IE一般都可以實(shí)現(xiàn)。

devdo

在chrome，firefox，opera中的顯示結(jié)果為

在IE6中顯示結(jié)果為

從上面的例子看出，IE6并不支持before、after，那么要如何讓IE6支持呢，通常的方法是通過(guò)腳本來(lái)實(shí)現(xiàn)，jquery.pseudo.js就是用于解決IE6不支持before、after的一個(gè)方法。

使用方法

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

二、修改css

在你需要使用的html標(biāo)簽中加入before，after屬性。

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

p:before,p {

content: "before";

before: 'before';

}

p:after,p {

content: "after";

after: "after";

}

devdo

在chrome，firefox，opera中的顯示結(jié)果為

在IE6中顯示結(jié)果為

在IE6中的before，after已經(jīng)顯示出來(lái)，但是其中before后的空格沒(méi)有體現(xiàn)出來(lái)，這個(gè)你可以通過(guò)before: “before “;后面加個(gè)空格來(lái)處理。

現(xiàn)在IE6已經(jīng)實(shí)現(xiàn)before，after已經(jīng)實(shí)現(xiàn)效果，有些同學(xué)就要問(wèn)了，那圖標(biāo)字體呢，如何實(shí)現(xiàn)。

我們就拿大名鼎鼎的font-awesome來(lái)舉例。

一般情況你只需要把font-awesome的類(lèi)插入css中即可實(shí)現(xiàn)，但是對(duì)IE6這種奇葩，我們要多走一步。

通過(guò)chrome，firefox等瀏覽器的審核元素功能，查找圖標(biāo)字體的content值，如下圖。

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

devdo

在chrome，firefox，opera中的顯示結(jié)果為

在IE6中顯示結(jié)果為

現(xiàn)在IE6的圖標(biāo)字體也實(shí)現(xiàn)了，更多功能等你發(fā)現(xiàn)。

下載jquery.pseudo.js

轉(zhuǎn)載請(qǐng)注明：前端錄?解決IE6/IE7/IE8不支持before,after問(wèn)題

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。