使用边框半径为 20 像素的背景图像时，表单按钮上的轮廓模糊

Question

由于某种原因，仅在 Windows 计算机上，在此页面上的“登录”按钮上，我得到了这个奇怪的模糊轮廓，很难解释，所以请亲自查看：

http://zis.smartlyedu.com/login

它不会出现在 Mac OS 上，但会出现在 Windows 上。

以前有人遇到过这种情况吗？

这是按钮的 CSS：

    div.input-submit input{
    outline:none;
    font-family:Helvetica, Arial, sans-serif;
    width:100px;
    height:35px;
    color:#fff;
    font-weight:normal;
    float:right;
    font-size:18px;
    text-shadow:#000 1px 1px 1px;
    border:1px solid #fff;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -ms-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.2)));
    background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));
    background-color:#31639d;
    font-weight:bold;
    border:1px solid #fff
    }

Answer 1

这个解决方案是通过原始帖子的评论找到的。

Alain，将 display:none 添加到输入元素以确认轮廓源自输入元素。如果您确定来源的原因，请禁用与您的元素匹配的选择器的所有 CSS 属性，然后将它们单独添加回来。这样，您将能够找到 CSS 问题的原因。

Jason McCreary 回复：

谢谢，我尝试了你的方法，发现问题出在
1px 边框和 20px 边框半径。显然是在 Windows 上
如果它们在提交按钮上同时使用，就会很奇怪。修复
它，我所做的就是删除边框并将其替换为边框：
没有任何;。如果我删除边框半径，它也会工作得很好。谢谢
寻求帮助！