按钮背景颜色未显示在边缘，但适用于 Firefox 和 Chrome

Question

我正在设计我的登录页面。我添加了按钮背景颜色，它在 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 中，

在边缘

在铬中，

Answer 1

Edge（和 IE11）不支持背景颜色值内的不透明度值 使用

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

Answer 2

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

使用

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

改为。

Answer 3

尝试改变

background-color: #007182fb;

到

background-color: #007182;

希望能解决问题。

清除浏览器缓存也可能会有所帮助。