我的按钮的背景色我们不在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。