开发者

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!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜