按钮背景色未在边缘显示,但可在Firefox和Chrome浏览器上使用

时间:2018-10-07 11:56:42

标签: html css google-chrome firefox microsoft-edge

我正在设计我的登录页面。我添加了按钮背景色,该背景色完美地显示在chrome和firefox上,但未显示在Microsoft Edge上。以下是我的HTML和CSS, 注意-我尝试了很多颜色,所有颜色都在chrome和Firefox上工作,但不在边缘

HTML

         .index-un-right-nav-buttom{
                float: left;
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
                width: 100%;
            }
                .index-un-right-nav-submit-button{
                    float: left;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    height: 50px;
                    width: 100px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    margin-left: 10%;
                    border: none;
                    outline: none;
                    color: #ffffff;
                    background-color: #007182fb;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 18px;
                    border-radius: 50px;
                }
<span class="index-un-right-nav-button">
    <button class="index-un-right-nav-submit-button">Login</button>
</span>

       

在Firefox中, image in firefox

在边缘 in edge

在Chrome中, in chrome

3 个答案:

答案 0 :(得分:3)

Edge不支持8位颜色表示法。参见CanIUse

使用

background-color: rgba(0, 113, 130, 0.984);

相反。

答案 1 :(得分:2)

尝试更改

background-color: #007182fb;

background-color: #007182;

希望可以解决此问题。

清除浏览器现金也可能有帮助。

答案 2 :(得分:0)

Edge(和IE11)不支持background-color值内的不透明度值 使用

background-color: rgba(0, 113, 130, 0.95);