[Which tags do not support pseudo-elements? 】
I just know this pose. In order not to mislead readers, I will add it quickly.
Although pseudo-elements are powerful, there are still some specific tags that do not support pseudo-elements before and after.
Such as <img>, <input>, <iframe>, these tags do not support the use of similar img::before.
The reason is that if you want the label to support pseudo-elements, you need this element to be able to insert content, that is to say, this element must be a container. Elements such as input, img, iframe, etc. cannot contain other elements, so content cannot be inserted through pseudo-elements.
[Difference and compatibility between css3 and css pseudo-classes and pseudo-elements]
Single colons (:) are used for CSS3 pseudo-classes, and double colons (::) are used for CSS3 pseudo-elements.
A pseudo-element consists of a double colon and the pseudo-element name. The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. However, pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes, such as :first-line, :first-letter, :before, :after, etc.
For pseudo-elements that existed before CSS2, such as :before, the ::before function of single colon and double colon is the same.
Therefore, if your website only needs to be compatible with browsers such as webkit, firefox, opera, etc., it is recommended to use double colons for pseudo-elements. If you have to be compatible with IE browsers, it is safer to use CSS2 single colons.
The meaning of the above is: css2 pseudo-classes and pseudo-elements use single quotes, all browsers are compatible, but css3 pseudo-classes are single quotes such as: hover, pseudo-elements are double quotes: before; but double quotes below IE8 do not compatible
[About ':before' and ':after' pseudo-elements]
The ':before' and ':after' pseudo-elements are used to insert generated content before or after an element's content.
【solution】
(1) Separately write styles for IE6/IE7/IE8 browsers, first introduce several methods of writing CSS styles for IE browsers alone. This article summarizes 3 methods of IE hacks, conditional comment CSS, and conditional comment html tags. Friends who need it You can refer to the following
Use JavaScript to judge IE6 IE7 IE8(Q) and implement the effects of ':before' and ':after' pseudo-elements through scripts;
Because the evil IE has various non-standards, it is inevitable to write some CSS for IE when developing the page. Familiar methods are IE hacks and conditional comments CSS (Conditional Stylesheets), below, may wish to discuss the advantages and disadvantages of these two methods.
①IE hacks
For example, an element whose left margin is 30px in other browsers, but set to 20px in IE6, can be written as follows:
.demo {margin-left: 30px; _margin-left: 20px; }
Personally, I prefer conditional CSS to IE hacks, just the fact that IE hacks have the word "hacks" in them makes me uncomfortable, and I always feel that this is a recipe, and a very partial solution.
However, IE hacks also have their advantages -
1. CSS hacks are embedded in normal CSS and will not generate more HTTP requests.
2.CSS hacks are embedded in ordinary CSS, which is more convenient to write.
Of course, its shortcomings are also obvious-
1. It is a non-standard product.
2. Embedded in other CSS, inconvenient to maintain. Maintenance is a nightmare especially when the number of hacks is high.
3. Embedded in other CSS, even in non-IE browsers will be loaded, a waste of resources.
②Conditional comment CSS
The same example above, if using conditional comment CSS, can be written as follows:
<!--[if IE 6 ]> <link rel="stylesheet" type="text/css" media="all" href="./ie6.css" /> <![endif]-->
.demo {margin-left: 20px; }
Here's a note: Conditional comments are an IE-proprietary Microsoft extension to regular (X)HTML comments. From the W3C standard, it is also a non-standard product, but it is Microsoft's official way to develop for IE, and conditional comments appear as regular comments for all other browsers, so they are harmless to other browsers.
The advantage of conditional comment CSS is that it is written in a separate CSS file, can be accurately controlled to load in a specific IE, will not cause waste of resources, and is easy to maintain.
The disadvantage is that redundant HTTP requests will be generated, especially when you need a lot of compatible IE versions, you need to generate multiple HTTP requests, which will undoubtedly affect the page loading speed for low versions of IE with a small number of channels. .
[Summary and comparison]: Obviously, the above two methods are not very good methods, therefore, a relatively better solution is introduced next.
③Conditional comment html tag
This scheme also uses conditional comments, but instead of using conditional comments for CSS, it uses conditional comments for html tags and introduces different classes to distinguish different IE and other browsers. E.g:
<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]-->Then add the corresponding class for the specific IE CSS and write it in the ordinary CSS file. For example, the above example can be written in a CSS file:
.ie6 .demo {margin-left: 20px; }
This method absorbs the benefits of conditional comment expressions without generating redundant HTTP requests, just because these IE-specific CSS is put together with normal CSS, that is, not the corresponding IE will also be loaded, so if the CSS If the number is too large, it will cause waste like using hacks. Developers need to choose methods according to specific situations.
Take IE8 as an example: refer to IE8 style files
<!--[if lte IE 8 ]> <link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" /> <![endif]-->Original css file code
.icon-spinner::before {
content: "\f110";
}
.icon-circle::before {
content: "\f111";
}
ie8.css code:
</pre><pre name="code" class="css"><span style="color:#ff0000;">.icon-spinner::before {
content: "\f110";
}
.icon-circle::before {
content: "\f111";
}</span>
iE8 only supports: not supported::
(2) Use the jQuery plug-in Pseudo Plugin, which uses IE's unique CSS behavior and CSS expressions to simulate the effects of ':before' and ':after' pseudo-elements.
Instructions:
1. Introduce jquery and refer to 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>
.