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。圆形和蓝色的类也在样式表中定义，但我已经测试了没有这些添加的按钮，它们仍然不起作用。

<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

在任何版本的IE中都没有显示css按钮

1 个答案: