Fuzzy outline on a form button when using a background image with a 20px border-radius
For some reason, exclusively on Windows machines, on the Sign in 开发者_Go百科button on this page, I'm getting this odd fuzzy outline that's difficult to explain, so see for yourself:
http://zis.smartlyedu.com/login
It doesn't appear on Mac OS, but it does on Windows.
Has anyone encountered this before?
Here is the CSS for the button:
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
}
This solution has been found through comments at the original post.
Alain, add display:none to the input element to confirm that the outline is originating from the input element. If you're sure about the origin's cause, disable all CSS attributes of the selectors which match your element, and add them back individually. This way, you will be able to find the cause of your CSS issue.
Jason McCreary responded:
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!
精彩评论