Unscharfer Umriss auf einer Formularschaltfläche bei Verwendung eines Hintergrundbildes mit einem 20px-Rahmenradius

Question

Aus irgendeinem Grund erscheint ausschließlich auf Windows-Rechnern auf der Schaltfläche "Anmelden" auf dieser Seite dieser seltsame, unscharfe Umriss, der schwer zu erklären ist, also sehen Sie selbst:

http://zis.smartlyedu.com/login

Unter Mac OS wird sie nicht angezeigt, unter Windows jedoch schon.

Ist das schon einmal jemandem aufgefallen?

Hier ist das CSS für die Schaltfläche:

    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

Diese Lösung wurde durch Kommentare im Originalbeitrag gefunden.

Alain, fügen Sie display:none zum Eingabeelement hinzu, um zu bestätigen, dass der Umriss vom Eingabeelement ausgeht. Wenn Sie sicher sind, dass die Ursache für den Umriss vom Eingabeelement ausgeht, deaktivieren Sie alle CSS-Attribute der Selektoren, die zu Ihrem Element passen, und fügen Sie sie einzeln wieder hinzu. Auf diese Weise können Sie die Ursache für Ihr CSS-Problem herausfinden.

Jason McCreary hat geantwortet:

Danke, ich habe Ihre Methode ausprobiert dem 1px-Rahmen und dem 20px-Rahmenradius liegt. Offenbar flippt es unter Windows ausflippen, wenn sie gleichzeitig auf einer Schaltfläche verwendet werden. Um das Problem zu beheben, habe ich nur die Ränder entfernt und sie durch border: none;. Wenn ich den border-radius entfernen würde, würde es auch funktionieren. Vielen Dank für die Hilfe!