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

该文章由 leevare 发布于 ,归类于 HTML/CSS

解决办法是新增一个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/

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒