我按钮的背景颜色使我们无法在IE中工作

Question

我有一个带有背景色的按钮，在IE 11中不起作用。

这是它的外观（Firefox）

在IE中：

 .loginButton { width: 100% !important; background-color: rgb(0, 148, 146, 0.8) !important; border: 0px !important; font-size: 2em !important; letter-spacing: 1px !important; border: 0px !important; margin-bottom: 5% !important; filter: none !important; overflow: hidden !important; } .loginButton span { cursor: pointer !important; display: inline-block !important; position: relative !important; transition: 2.5s !important; } .loginButton span:after { font-family: FontAwesome !important; content: "\\f101" !important; position: absolute !important; opacity: 0 !important; top: 0 !important; right: -20px !important; transition: 0.5s !important; } .loginButton:hover { border-color: rgb(31, 153, 214) !important; padding-right: 30px !important; color: #ffffff !important; transition: all 0.9s ease !important; } .loginButton:hover span { padding-right: 30px !important; color: #ffffff !important; letter-spacing: 3px !important; transition: all 0.9s ease !important; } .loginButton:hover span:after { opacity: 1 !important; right: 0px !important; } .loginButton:after { width: 100% !important; background-color: white !important; border: 0px !important; font-size: 2em !important; } 

 <b:commandButton styleClass="loginButton" tooltip-position="right" tooltip="Melde dich beim IUBH-Ticketssystem an"> <span>Anmelden </span> </b:commandButton> 

Answer 1

我不明白为什么您的背景色可在Firefox上使用。 在我的演示中，我得到了错误无效值

background-color: rgb(0, 148, 146, 0.8) !important;

应该更改为

background-color: rgba(0, 148, 146, 0.8) !important;

https://jsfiddle.net/5qbbmx4z/6/

并且您不应该尽可能使用!important 。