html - css 按钮未显示在任何版本的 IE 中

Question

我一直遇到一个问题，在 Chrome、Firefox 和 Safari 中，我的网站在顶部显示我制作的 css 按钮。但是，在 IE 9 和 11 中，按钮不存在，只有链接存在。我已尽我所能在 CSS 中添加冗余，但我一定遗漏了一些东西。按钮的完整代码相当长，但我已将问题定位到以下几行。

.button {
/* effects */
    border-top: 1px solid rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: -ms-radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}

这是按钮的 html。 round 和 blue 的类也在样式表中定义，但我测试了没有这些添加的按钮，但它们仍然不起作用。

<a role="button" class="button round disabled">Home</a>
<a href="Software.html" role="button" class="button round blue">Software</a>
<a href="Support.html" role="button" class="button">Support</a>
<a href="Consulting.html" role="button" class="button round blue">Consulting Services</a>
<a href="New.html" role="button" class="button round blue">What's New</a>
<a href="Clients.html" role="button" class="button round blue">Our Clients</a>
<a href="About.html" role="button" class="button round blue">About Us</a>
<a href="Contact.html" role="button" class="button round blue">Contact Us</a>

任何建议将不胜感激，因为我只是不明白为什么这在 IE 9 和 11 中都不起作用。

Answer 1

看起来不透明度值的 RGBA 属性在 IE 中不起作用。我刚刚修改了您的代码，删除了 rgba 并分配了两种不同的颜色。我还添加了带有高度和填充的显示属性。之后它对我来说工作正常。

 .button {
/* effects */
border-top: 1px solid rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(0,0,0,0.1);
background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -ms-radial-gradient(farthest-corner ellipse  at top, #ff00ff 0%, #000fff 100%);
background-image: radial-gradient(farthest-corner ellipse  at top, #ff00ff 0%, #000fff 100%);
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
display:inline-block;
height:50px;
padding:0px 30px;
}

如果你想克服这个问题，你需要做一些技巧。在 Stack Overflow 中，他们已经讨论过如何克服这个问题。通过以下网址 CSS background opacity with rgba not working in IE 8

JSFIDDLE DEMO