css attr(content) 在 IE 中不起作用答案

【问题标题】：css attr(content) not working in IEcss attr(content) 在 IE 中不起作用
【发布时间】：2017-03-07 08:36:08
【问题描述】：

有人可以在codepen 上查看这个示例并告诉我如何获取内容： attr(data-hover) 在 IE10+ 中工作，除了在 FireFox 中之外，它根本不工作。它甚至似乎都没有为 anchor 创建 :before 伪元素。从第 40 行读取 a:before 类

HTML：

<nav>
    <ul>
        <li data-content="Home"><a data-hover="Home" href="#">Home</a></li>
        <li><a data-hover="About" href="#">About</a></li>
        <li><a data-hover="Services" href="#">Services</a></li>
        <li><a data-hover="Blogs" href="#">Blogs</a></li>
        <li><a data-hover="Articles" href="#">Articles</a></li>
        <li><a data-hover="Contact" href="#">Contact</a></li>                       
    </ul>
</nav>

CSS：

header nav ul li a:hover:before {
    color: #355b0f;
    padding: 34px 0; 
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;        
    text-align: center;
    background: none repeat scroll 0% 0% #fff;      
    display: block;

    transition: #6363CE 0.3s ease 0s;
    -ms-transition: #6363CE 0.3s ease 0s;
    transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    transform-origin: 50% 0px 0px;
    -ms-transform-origin: 50% 0px 0px;
}

【问题讨论】：

关于堆栈溢出的问题应该在问题本身中包含减少的代码（而不是链接到外部资源）。你还试过什么？
看来，动画有问题。您可以将内容值更改为某个固定值，然后查看，它仍然不起作用
如果有人知道如何解决此问题以在 IE 和 Chrome 中工作，我不知道如何做好转换，将不胜感激。

标签： html css internet-explorer

【解决方案1】：

对于 Chrome 和 safari 中的转换，您需要添加 -webkit-transition 也用于变换 http://www.w3schools.com/cssref/css3_pr_transform.asp

【讨论】：