永发信息网

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

答案:1  悬赏:40  手机版
解决时间 2021-02-18 22:44
  • 提问者网友:喧嚣尘世
  • 2021-02-17 23:54
请问各位大神,在IE下,有办法解决css :after选择器不兼容的问题吗???急求啊。。
最佳答案
  • 五星知识达人网友:不如潦草
  • 2021-02-18 01:19
1.CSS部分
类似这样子的命名:

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

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

复制代码代码如下:


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实在是不在考虑范围。
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯