a:after 在 IE 9 中工作吗？ [关闭]

Question

我试图找出我的问题，但仍然没有运气。我想知道为什么这个 css 代码在 IE9 中不起作用？ 这是 jsfiddle http://jsfiddle.net/winresh24/xNLNw/ 希望你能帮助我..

#front1 .menu-main .item a{position:relative;}

#front1 .menu-main .item a span{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);color:#000;-webkit-transition:-webkit-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:-moz-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:-o-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);-ms-transition:-ms-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);transition:transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);display:block}

#front1 .menu-main .item a:after{content:attr(data-text);color:#fff;position:absolute;left:0;right:0;padding-top:4px;top:0;-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);-o-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition:-webkit-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:-moz-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:-o-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);-ms-transition:-ms-transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);transition:transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);text-align:center;background:#432c75}

#front1 .menu-main .item a:hover span,
#front1 .menu-main .item a.status-active span,
#front1 .menu-main .item.active-parent a span
{-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;-webkit-transform:translate3d(0,-14px,0);-moz-transform:translate3d(0,-14px,0);-o-transform:translate3d(0,-14px,0);-ms-transform:translate3d(0,-14px,0);transform:translate3d(0,-14px,0)}

#front1 .menu-main .item a:hover:after,
#front1 .menu-main .item a.status-active:after,
#front1 .menu-main .item.active-parent a:after
{-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

.no-csstransforms3d #front1 .menu-main .item a span{top:0;-webkit-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);-ms-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1)}

.no-csstransforms3d #front1 .menu-main .item a:after{top:100%;-webkit-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);-ms-transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);transition:top 0.85s cubic-bezier(0.19, 1, 0.22, 1);bottom:0}

.no-csstransforms3d #front1 .menu-main .item a:hover span{top:-14px}
.no-csstransforms3d #front1 .menu-main .item a:hover:after{top:0}

这里是 HTML

<div class="menu-main">
    <ul class="reset">
        <li class="item" id="items"><a href="about.html" data-text="ABOUT US"><span>ABOUT US</span></a></li>
        <li class="item"><a href="services.html" data-text="SERVICES" class="itemsa"><span>SERVICES</span></a></li>
        <li class="item" id="item"><a href="mediarelease.html" data-text="MEDIA RELEASE"><span class ="menu">MEDIA RELEASE</span></a></li>      <li class="item" id="item"><a href="businessopportunity.html" data-text="BUSINESS OPPORTUNITY"><span class ="menu">BUSINESS OPPORTUNITY</span></a></li>
        <li class="item"><a href="contact.html" data-text="CONTACT US"><span>CONTACT US</span></a></li>
    </ul>
</div>

这是 IE 和 Chrome 中的截图：

Answer 1

是的，在 IE9 中工作后，在 IE8 中工作，而不是低于 IE8。

但您使用的 css-transitions 无法在 IE9 上运行

---