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

在Chrome、Firefox和Safari中，我的网站会在顶部显示我制作的css按钮，这是我一直遇到的问题。然而，在IE9和IE11中，按钮不存在，只有链接存在。我已经尽我最大的能力在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和IE 11中都不起作用。

看起来像是带有不透明度值的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;
}

如果你想克服这个问题，你需要做一些技巧。在堆栈溢出中，他们已经讨论过这个问题，比如如何克服这个问题。浏览以下url

---

径向梯度在IE 9中肯定不起作用。它在IE10和IE11中工作。我用它来做测试。证明：不使用IE9是有道理的，但我刚刚在办公室的其他计算机上测试过，它不使用IE11。如果我从文件运行它与托管它然后查看它会有区别吗？