Question

请问各位大神，在IE下，有办法解决css :after选择器不兼容的问题吗？？？急求啊。。

Answer 1

1.CSS部分
类似这样子的命名：

复制代码代码如下:
.example:before, .example before {}
.example:after, .example after {}

一个有冒号，一个是空格分隔。前者IE8+及其他现代浏览器；后者为IE6-7准备的。
2.HTML部分
如果before/after伪类元素含有content内容（不是空字符），则content内容在HTML标签上呈现（方便IE6/7下获取），例如：

复制代码代码如下:
<div class="example" data-content=""></div>

CSS部分的content属性值应该如下：

复制代码代码如下:
.example:before, .example before { content: attr(data-content); ... }
.example:after, .example after { content: attr(data-content); ... }

3.JS部分
JS是为IE6/7准备的，所做的事情很简单，网元素内部插入两个元素，标签名为”before“或”after“或同时。方法代码如下：

复制代码代码如下:
var $beforeAfter = function(dom) {
if (document.querySelector || !dom && dom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || '';
var before = document.createElement("before") //可以根据需要把after或before删除一个
, after = document.createElement("after"); //默认会把两个都加上
// 内部content
before.innerHTML = content;
after.innerHTML = content;
// 前后分别插入节点
dom.insertBefore(before, dom.firstChild);
dom.appendChild(after);
};

4.调用
$beforeAfter(document.getElementById("tip")); //tip是需要的id名

追问

.screen:after,
.screen after {
content: attr(data-content);
}
同时通过js给data-content属性赋值。这样IE还是不行。。。还需要改动什么吗？？

追答

你是要兼容ie几呀。这个方法我都试过是可行的，不知道你是不是哪步做错了

追问

我这边试的IE几都不可以。但是其他几大浏览器都可以。

追答

我记得ie8以上就已经支持before和after了。ie7和6实在是不在考虑范围。