出于某种原因,仅在 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
}
最佳答案
这个解决方案是通过原始帖子的评论找到的。
Alain,将 display:none 添加到 input 元素以确认轮廓源自 input 元素。如果您确定来源的原因,请禁用与您的元素匹配的选择器的所有 CSS 属性,然后将它们单独添加回来。这样,您将能够找到 CSS 问题的原因。
Jason McCreary 回复:
Thanks, I tried your method and I found out that the issue was with the 1px border and the 20px border-radius. Apparently on Windows it freaks out if they're used at the same time on a submit button. To fix it, all I did was remove the borders and replace it with border: none;. If I removed the border-radius it would work fine, too. Thanks for the help!
关于css - 使用具有 20px 边框半径的背景图像时,表单按钮上的模糊轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7539561/