伪元素兼容IE

青春..荒唐

浏览: 962414 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端积累

前端积累

【哪些标签不支持伪元素？】

我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。

伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。

究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

【css3和css伪类和伪元素区别与兼容性】

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

　　所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

以上的意思为：css2伪类和伪元素都是用单引号，所有的浏览器都兼容，但是css3伪类为单引号如：hover ，伪元素为双引号：：before；但是双引号IE8以下不兼容

【关于 ':before' 和 ':after' 伪元素】

':before' 和 ':after' 伪元素用来在一个元素的内容之前或之后插入生成的内容。

【解决方案】

（1）单独写针对IE6/IE7/IE8浏览器样式，先介绍IE浏览器单独写CSS样式的几种方法,本文总结了IE hacks、条件注释 CSS、条件注释 html 标签3种方法,需要的朋友可以参考下

使用 JavaScript 判断 IE6 IE7 IE8(Q) 并在其中通过脚本实现 ':before' 及 ':after' 伪元素的效果；

因为万恶的 IE 存在各种的不标准，因此，在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。

①IE hacks

举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写：

.demo {margin-left: 30px; _margin-left: 20px; }

对我个人而言，喜欢条件注释 CSS 是胜于 IE hacks ，光是 IE hacks 里面带有“hacks”这个单词已经让人很不舒服，总觉得这是偏方，而且是很偏的解决方案。

但是，IE hacks 也有它的优点——

1.CSS hacks 内嵌在普通的 CSS 里面，不会产生更多 HTTP 请求。

2.CSS hacks 内嵌在普通的 CSS 里面，编写时比较方便。

当然，它的缺点也很明显——

1.它是不标准的产物。

2.内嵌在其他 CSS 中，不便维护。尤其是当 hacks 的数量比较多的时候维护简直是个恶梦。

3.内嵌在其他 CSS 中，即使在非 IE 浏览器中也会被加载，浪费资源。

②条件注释 CSS

同样是上面的例子，如果使用条件注释 CSS ，可以如下编写：

<!--[if IE 6 ]>
<link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
<![endif]-->

.demo {margin-left: 20px; }

这里说明一下：条件注释是一种 IE 专有的、对常规（X）HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说，它也是不标准的产物，但它是微软官方推出的针对 IE 进行开发的方式，并且条件注释对于其他所有浏览器作为常规注释出现，因此对其他浏览器无害。

条件注释 CSS 的好处是在独立的 CSS 文件中编写，能准确控制在特定的 IE 中加载，不会造成资源浪费，并且便于维护。

缺点就是会产生多余的 HTTP 请求，尤其是当你需要兼容的 IE 版本很多的时候，你就需要产生多个 HTTP 请求，这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。

【总结对比】：显然，以上两种方法都不是很好的方法，因此，接下来介绍一种相对来说更好的解决方案。

③条件注释 html 标签

这种方案也是利用条件注释，但并不是对 CSS 使用条件注释，而是对 html 标签使用条件注释，引入不同的 class ，从而区分不同的 IE 以及其他浏览器。例如：

<div id="phpcode8" class="msgborder"><pre name="code" class="html"></pre></div>

<!DOCTYPE html>  
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->

然后把针对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里即可。例如上面的例子则可以在 CSS 文件里编写：

.ie6 .demo {margin-left: 20px; }

这种方法吸收了条件注释表达式的好处同时又不会产生多余的 HTTP 请求，只是由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起，即不是相应的 IE 也会被加载，因此如果 CSS 数目比较多的话就会像使用 hacks 那样，造成浪费，开发者需要根据具体情况选择方法。

以IE8为例：引用IE8样式文件

<!--[if lte IE 8 ]> <link rel="stylesheet" type="text/css"
 media="all" href="./assets/css/ie8.css" /> <![endif]-->

原css文件代码

.icon-spinner::before {  
content: "\f110";  
}  
.icon-circle::before {  
content: "\f111";  
}

ie8.css代码：

</pre><pre name="code" class="css"><span style="color:#ff0000;">.icon-spinner::before {  
content: "\f110";  
}  
.icon-circle::before {  
content: "\f111";  
}</span>

iE8只支持: 不支持::

（2）使用 jQuery 的插件 Pseudo Plugin，该组件利用 IE 特有的 CSS 行为（behavior）及 CSS 表达式来模拟 ':before' 及 ':after' 伪元素的效果。

使用方法：

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

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

这里注意：经过测试，juqery版本必须是1.7.2，其他版本无效。

①jquery.pseudo.js下载链接http://static.wozhuye.com/uploadfile/2016/0118/20160118042649635.rar

②jquery-1.7.2.min.js链接http://www.htmleaf.com/js/jquery/1.7.2/jquery.min.js

二、修改css

在你需要使用的html标签中加入before，after属性。

如通常p:before{content: “before”;}，要在p标签中加入{before: ‘before';after: “after”;}，如不明白请看下面示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兼容</title>
    <script src="./jquery-1.7.2.min.js"></script>
    <script src="./jquery.pseudo.js"></script>
</head>
<body>
<style type="text/css">
    p:before {
        content: "前面";
        before: '前面';/*兼容IE*/
    }
    p:after {
        content: "后面";
        after: "后面";/*兼容IE*/
    }
</style>
<p> Aloha! </p>
</body>
</html>

分享到：

【JavaScript从入门到精通】第一课 | 伪对象实现的功能

2018-01-14 20:52
浏览 2213
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论