Question

#overlay_contact_us{
    position: relative;
    height:60px;
    width: 200px;
    display: table;
    margin: 0 auto;
    padding: auto 100%;
    vertical-align: middle;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    border-radius: 15px;
    border: 3px solid rgb(255,225,255);
    background-color: rgba(0,0,0,.4);
    -webkit-transition: background-color .35s linear;
}
#overlay_contact_us:hover{
    background-color: rgba(45,139,198,.6);
    -webkit-transition: background-color 0s linear;
}

转换不起作用这一事实并不是一个主要问题，但我希望尽可能让它发挥作用。我是否应该以与浏览器更广泛兼容的其他方式进行转换，或者它是否仅在FireFox中不受支持？

Answer 1

使用跨浏览器的前缀

对于chrome，safari，请使用前缀：-webkit

对于firefox使用-moz

参考：https://developer.mozilla.org/en/docs/Web/CSS/transition

使用

#overlay_contact_us{
    position: relative;
    height:60px;
    width: 200px;
    display: table;
    margin: 0 auto;
    padding: auto 100%;
    vertical-align: middle;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    border-radius: 15px;
    border: 3px solid rgb(255,225,255);
    background-color: rgba(0,0,0,.4);
    -webkit-transition: background-color .35s linear;
    -moz-transition: background-color .35s linear;
    transition: background-color .35s linear;
}
#overlay_contact_us:hover{
    background-color: rgba(45,139,198,.6);
    -webkit-transition: background-color 0s linear;
     -moz-transition: background-color 0s linear;
    transition: background-color 0s linear;
}

Webkit转换正在使用chrome而不是firefox

1 个答案: