5

なんらかの理由で、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
    }
4

1 に答える 1

1

この解決策は、元の投稿のコメントから見つかりました。

Alain、display：noneを入力要素に追加して、アウトラインが入力要素から発信されていることを確認します。原点の原因がわかっている場合は、要素に一致するセレクターのすべてのCSS属性を無効にして、個別に追加し直してください。このようにして、CSSの問題の原因を見つけることができます。

JasonMcCrearyは次のように答えました。

おかげで、私はあなたの方法を試しましたが、問題は1pxの境界線と20pxのborder-radiusにあることがわかりました。どうやらWindowsでは、送信ボタンで同時に使用するとおかしくなります。それを修正するために、私がしたのは、境界線を削除し、それをborder：none;に置き換えることだけでした。境界線の半径を削除すると、それも正常に機能します。助けてくれてありがとう！

于 2011-09-24T15:06:29.280 に答える