解決IE6/IE7/IE8不支持before,after問題

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

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

先來看一個例子

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

1. <style type="text/css">
2. p:before {
3. content: "before";
4. }
5. p:after {
6. content: "after";
7. }
8. </style>
9. <p> devdo </p>

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

在IE6中顯示結果為

 

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

使用方法

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

1. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
2. <script type="text/javascript" src="jquery.pseudo.js"></script>

二、修改css

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

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

1. p:before,p {
2. content: "before";
3. before: 'before';
4. }
5. p:after,p {
6. content: "after";
7. after: "after";
8. }
9. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
10. <script type="text/javascript" src="jquery.pseudo.js"></script>
11. <p> devdo </p>

在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”;}，全部示例看下面代碼。

1. <style type="text/css">
2. body{padding:30px;}
3. p i{before:"\f18a";}
4. </style>
5. <link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
6. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
7. <script type="text/javascript" src="jquery.pseudo.js"></script>
8. <p> devdo <i class="fa fa-weibo"></i></p>

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

在IE6中顯示結果為

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