Css 使用边界半径为20px的背景图像时，窗体按钮上的模糊轮廓

出于某种原因，仅在Windows机器上，在本页的登录按钮上，我得到了一个难以解释的奇怪模糊轮廓，请自己看看：

它不会出现在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
    }

---

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

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

杰森·麦克里回答说：

谢谢，我试过你的方法，发现问题出在 1px边界和20px边界半径。显然是在窗户上 如果在提交按钮上同时使用它们，会让人抓狂。修理 它，我所做的只是移除边界并用边界替换它： 没有一个如果我删除边界半径，它也可以正常工作。谢谢 谢谢你的帮助

---

什么浏览器？应用

大纲后问题是否得到解决：无（CSS）？@Rob W，他说IE.Alain，你能为我们这些没有IE的人发布一个屏幕截图吗？我在Chrome、FF和IE9上都会遇到这种情况。我已经有了提纲：没有；这不是问题所在unfortunately@JasonMcCreary它实际上出现在任何windows浏览器上（至少是主浏览器）。但这在任何mac浏览器上都不会发生。如果你进入页面，你没有看到模糊的轮廓吗？（如果你在windows上）编辑：但它在Chrome上最明显。奇怪的是，如果您使用浏览器缩放功能放大几次，模糊性就会消失。@JasonMcCreary
Windows！=MSIE
。Alain，在输入元素中添加
display:none
，以确认轮廓来自输入元素。确认后，禁用所示CSS的所有CSS属性，并分别添加它们。