如何解决ie8中不支持before和after伪类的问题

解决办法是新增一个css类来作为后备。

例如如下写法

body:before, body .before {
    content: "";
    ...
}

既然使用js来检测,我们可以把html写成下面的这个样子,将content的内容写到data-content中。

<div class="example" data-content="xxxx"></div>

然后当浏览器版本比较低的时候,使用下面的js代码来自动插入beforeafter类。

var $beforeAfter = function(dom) {
    if (document.querySelector || !dom && dom.nodeType !== 1) return;

    var content = dom.getAttribute("data-content") || '';     
    var before = document.createElement("before")
        , after = document.createElement("after");

    // 内部content
    before.innerHTML = content;
    after.innerHTML = content;
    // 前后分别插入节点
    dom.insertBefore(before, dom.firstChild);
    dom.appendChild(after);
};

解决办法参考自张鑫旭的博客http://www.zhangxinxu.com/wordpress/2012/11/before-after-use-web/

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注